DEV Community

Burhanuddin Udaipurwala
Burhanuddin Udaipurwala

Posted on • Updated on • Originally published at burhanuday.com

[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
Enter fullscreen mode Exit fullscreen mode

or

npm install --save @use-expo/font
Enter fullscreen mode Exit fullscreen mode

In your App.js file, import the hook

import { useFonts } from '@use-expo/font';
Enter fullscreen mode Exit fullscreen mode

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"),
  });
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
   )
  }
}
Enter fullscreen mode Exit fullscreen mode

Connect with me

You can follow me on DEV or connect with me on Twitter. Subscribe to my newsletter

Discussion (11)

Collapse
kbrandwijk profile image
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)

Collapse
burhanuday profile image
Burhanuddin Udaipurwala Author

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

Collapse
redearthbluesky profile image
Ian Salt • Edited on

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

Collapse
burhanuday profile image
Burhanuddin Udaipurwala Author

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

Collapse
redearthbluesky profile image
Ian Salt • Edited on

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

Collapse
benjanapo profile image
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?

Collapse
redearthbluesky profile image
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.

Collapse
enigama profile image
Eugene

Thanks so much dude, really helpful

Collapse
burhanuday profile image
Burhanuddin Udaipurwala Author

Thanks a lot😁

Collapse
kbanashek profile image
Kyle Banashek

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

Collapse
burhanuday profile image
Burhanuddin Udaipurwala Author

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