DEV Community

[Deprecated] Custom fonts in React Native (Expo)

Burhanuddin Udaipurwala on May 21, 2020

The @use-expo/font package has been deprecated. Use the new expo-font package instead. Docs for which can be found here - https://docs.expo.dev/ve...

Read full post

Kim Brandwijk • Mar 22 '22

@burhanuday Hi, first of all, my compliments on the very clear blog post. I have one small remark though, the @use-expo/font package is deprecated, as the useFonts hook is part of the core expo-font package for quite a while now.
To avoid confusion for Expo users that come across your blog, would it be possible to either update the snippets to use expo-font (it's a drop-in replacement), or add a note at the beginning of the article? Thank you!

Kim (Developer Success Engineer @ Expo)

Burhanuddin Udaipurwala • Mar 28 '22

updating the blog post to say that this is deprecated and linking to the expo-font package. thank you

Ian Salt • Oct 28 '20 • Edited

Hi, thanks for this was a big help today. However, I got an error using Apploading and destructured it one step further by creating a SetFont.js component and importing it into the root component. I have tested and the fonts are available throughout the app.

const SetFonts = () => {
const [isLoaded] = useFonts({
'AlfaSlabOne': require('../../assets/fonts/AlfaSlabOne-Regular.ttf'),
'OpenSans': require('../../assets/fonts/Open_Sans/OpenSans-Regular.ttf'),
'Calibri': require('../../assets/fonts/calibri/Calibri-Regular.ttf')
})

if (!isLoaded) {
return AppLoading
} else {
return null
}
}

Burhanuddin Udaipurwala • Oct 29 '20

Hi, if this is the exact code you're using, wrap Font is loading... in quotes - "Font is loading...". That might be the problem

Ian Salt • Oct 29 '20 • Edited

Hi, yep I added return AppLoading back instead and it works now

Napolitano Andrea • Dec 13 '21

Hi, i'm really struggling for import fonts in my code... One tutorial say to use "react-native link" and another says to use "Font.useFonts". The one that worked for me is the second but I would like to load all fonts once in the App.tsx and then use them in all other components, how can I do this?

Ian Salt • Oct 29 '20

It worked and now I went back to the project and getting an error message I need to use Font.loadAsynch. I have fixed with add the code later but I think need to add the fonts manually to the android project as not working on device.