Custom fonts in React Native (Expo)

#reactnative #expo #fonts

Burhanuddin Udaipurwala May 21, 2020 ・2 min read

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

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

Discussion

Ian Salt • Oct 28 '20

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

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

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.