The
@use-expo/fontpackage has been deprecated. Use the newexpo-fontpackage instead. Docs for which can be found here - https://docs.expo.dev/versions/latest/sdk/font/. If you are starting a new project, DO NOT follow this guide.
Expo is a great platform for new comers to React Native and for building fast prototypes without having to meddle with Android or iOS code. When building an application, you will want to use custom fonts in your app. Expo makes using custom fonts really really simple
To get started, download the font you want to use in your app in .ttf or .otf format. Create a directory in the assets folder and name it fonts. Place all your font files here.
Now you will need to install a package that provides a hook called useFonts
yarn add @use-expo/font
or
npm install --save @use-expo/font
In your App.js file, import the hook
import { useFonts } from '@use-expo/font';
Then use the hook to load all the fonts
const [isLoaded] = useFonts({
"SourceSans-ExtraLight": require("./assets/fonts/SourceSansPro-ExtraLight.ttf"),
"SourceSans-Light": require("./assets/fonts/SourceSansPro-Light.ttf"),
"SourceSans-Regular": require("./assets/fonts/SourceSansPro-Regular.ttf"),
"SourceSans-SemiBold": require("./assets/fonts/SourceSansPro-SemiBold.ttf"),
"SourceSans-Bold": require("./assets/fonts/SourceSansPro-Bold.ttf"),
"SourceSans-Black": require("./assets/fonts/SourceSansPro-Black.ttf"),
});
Note that this process is asynchronous so you will have to show a loading indicator meanwhile. For this, you can import AppLoading from Expo.
import { AppLoading } from 'expo';
And then if loaded is false, return AppLoading
To use the font you can provide the font name in the styles object
<Text style={{ fontFamily: "SourceSans-Regular" }}>Hello World</Text>
See below for a complete implementation
import React from "react";
import { Text, View } from "react-native";
import { useFonts } from "@use-expo/font";
import { AppLoading } from "expo";
export default function App() {
const [isLoaded] = useFonts({
"SourceSans-ExtraLight": require("./assets/fonts/SourceSansPro-ExtraLight.ttf"),
"SourceSans-Light": require("./assets/fonts/SourceSansPro-Light.ttf"),
"SourceSans-Regular": require("./assets/fonts/SourceSansPro-Regular.ttf"),
"SourceSans-SemiBold": require("./assets/fonts/SourceSansPro-SemiBold.ttf"),
"SourceSans-Bold": require("./assets/fonts/SourceSansPro-Bold.ttf"),
"SourceSans-Black": require("./assets/fonts/SourceSansPro-Black.ttf"),
});
if (!isLoaded) {
return <AppLoading />;
} else {
return (
<View>
<Text
style={{ fontFamily: "SourceSans-Regular" }}>
Hello World
</Text>
</View>
)
}
}
Connect with me
You can follow me on DEV or connect with me on Twitter. Subscribe to my newsletter
Top comments (11)
@burhanuday Hi, first of all, my compliments on the very clear blog post. I have one small remark though, the
@use-expo/fontpackage is deprecated, as theuseFontshook is part of the coreexpo-fontpackage 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)
updating the blog post to say that this is deprecated and linking to the expo-font package. thank you
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
}
}
Hi, if this is the exact code you're using, wrap Font is loading... in quotes - "Font is loading...". That might be the problem
Hi, yep I added return AppLoading back instead and it works now
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?
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.
Thanks so much dude, really helpful
Thanks a lot😁
How would component screens(not App.js) access or make use of those fonts?
All screens will be able to use the imported fonts. Just like in CSS