[Deprecated] Custom fonts in React Native (Expo)

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/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

Comments

[Kim Brandwijk]

@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]

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

[Ian Salt]

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]

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]

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

[Napolitano Andrea]

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]

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.

[Eugene]

Thanks so much dude, really helpful

[Burhanuddin Udaipurwala]

Thanks a lot😁

[Kyle Banashek]

How would component screens(not App.js) access or make use of those fonts?

[Burhanuddin Udaipurwala]

All screens will be able to use the imported fonts. Just like in CSS