Loading custom fonts natively does not seem to work

obytes / react-native-template-obytes

📱 A template for your next React Native project: Expo, PNPM, TypeScript, TailwindCSS, Husky, EAS, GitHub Actions, Env Vars, expo-router, react-query, react-hook-form.

https://starter.obytes.com

MIT License

2.19k stars 321 forks source link

Loading custom fonts natively does not seem to work #299

Closed ahcurrier closed 5 months ago

ahcurrier commented 6 months ago

Not sure if I'm missing something here?: https://starter.obytes.com/ui-and-theme/fonts/

This doesn't seem to do anything. For instance if I add a 'font-inter' className attribute to a Text component in the starter project, the font displayed is just the system font, not Inter, even though:

expo version is >= 50
Inter.ttf file is in assets/fonts
app.config.js has expo-font plugin and points to the ttf file
Font has been added to tailwind.config.js
Have run expo prebuild

Are others able to load fonts natively this way? Do I still need to use useFonts?

yjose commented 6 months ago

can you please add the font in style and not as className to check if the issue is only related to nativewind

ElenaBitire commented 5 months ago

I tested that, added 'font-inter' to a Text component className and seems to work fine. I also added a new font to the template for testing and was working as expected.

eduance commented 5 months ago

Adding font-inter or font-... works perfectly fine on iOS, but doesn't seem to work on Android unless we customise it to font-['Montserrat-Black']. Any idea's how to tackle this? The font's do work when using inline styles.

yjose commented 5 months ago

You are right @eduance, font with Android is a bit tricky as you need to add the correct font name, which is not always the font file name. For such cases, make sure to use otfinfo --family Font-file.ttf to get the correct name.

you can read more here