DEV Community

loading...

Custom fonts in React Native (Expo)

burhanuday profile image Burhanuddin Udaipurwala ・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

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

Discussion

pic
Editor guide
Collapse
redearthbluesky profile image
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
}
}

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

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

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