How to add a Google Font manually to your React Native Expo app?

When trying to follow the Fonts section in the Expo DOCS I found that all I got was errors the last being “loading fonts from remote URIs is temporarily not supported.” So if you want to use Google Fonts in RN Expo follow this article.

  1. Download the Font from Google Fonts.

a. Click the red plus icon in the corner of your desired font. This creates a black box/bar at the bottom of your screen.

b. Open the black bar by clicking it. It should expand and show your links to your desired font(s).

c. Click the download icon in the top right corner of this box that opens up.

2. Make the new font available in your project

a. Drag or copy your newly downloaded font folder into your assets/fonts folder or wherever you choose.

b. Require the desired font (it’s a .ttf file) into your project.

3. Setting up Expo to load/handle the font

a. Import AppLoading and Font from ‘expo’

b. Set state isReady: false

c. Wrap Font.loadAsync in an async/await wrapper

d. Require the new font with a folder path

e. Update state after loading is done — isReady: true

4. Include if statement for pre-rendering(AppLoading) orders.

5. Use fontFamily: ‘YourFont’ to call in font into StyleSheet

My code looks like this.

import { AppLoading, Font } from ‘expo’;

export default class HomeScreen extends React.Component {

state = { isReady: false,}

componentWillMount() {

(async() => {

await Font.loadAsync({

‘Roboto’: require(‘../assets/fonts/Roboto/Roboto-Regular.ttf’)

});

this.setState({ isReady: true});

})();

}

render() {

if (!this.state.isReady) {

return <AppLoading />;

}

return ( …. Your JSX here )

}

Sytle {

fontFamily: ‘Roboto’

}

This is my first help article so let me know how I did. Hit me up in the Expo Developers Slack channel @murffx