Using custom fonts in react native with font family name instead of file name

Question

Problem:

I have font separated to 2 files, like "XSansRegular.ttf" and "XSansBold.ttf", both has same font family, like "X Sans".

I have added it as assets.

But when I'm trying to use them with setting:

style={{
    fontFamily: "X Sans"
}}

it doesn't work. I need to use exact file name, like this:

style={{
    fontFamily: "XSansRegular"
}}

What I want to do:

Use it with font name, instead of file name

style={{
    fontFamily: "X Sans"
}}

with possibility to pass there props like bold

style={{
    fontFamily: "X Sans",
    fontWeight: 'bold'
}}

4b0 · Accepted Answer · 2022-10-25 03:29:48Z

1

Do you have the linked font files ?

If your react-native version >= 0.70，Run npx react-native-asset to link font files and try again.

4b0

22.4k30 gold badges97 silver badges143 bronze badges

answered Oct 25, 2022 at 3:15

Shika

411 bronze badge

Sign up to request clarification or add additional context in comments.

1 Answer 1