How to add custom fonts in React Native

Fonts are the building blocks of a great user experience, and custom fonts can provide a unique identity for apps, helping you make your app standout in a competitive marketplace.

In this guide we will be exploring ways to add custom fonts in a React Native app.

To follow along, you should be familiar with the basics of React Native or expo SDK, including JSX, components (class and functional), and styling.

You can simply copy and paste the code blocks from this guide, but I would suggest reading through the whole tutorial for a complete understanding.

This guide assumes you’ve already done the basic setup for your app.

• Adding fonts the React Native way (0.60+)
  • Get the fonts required for the app
  • Add the configuration to the project
  • Link the assets to the project
• Adding fonts the Expo way
  • Using hooks to initialize the fonts
  • Using the Async function to initialize the fonts

Adding fonts the React Native way (0.60+)

As per the latest updates to React Native (any version after 0.60), adding custom fonts to the app has become extremely straight forward and efficient.

All we have to do is to create a fonts directory, add the custom fonts that we want to use, create a config file, add the path, and link them to the project.

Get the fonts required for the app

This is a fairly simple process, as we have various sources available for fonts on the Internet. Google Fonts is a good example of a popular resource of open-source and free fonts. You can view and download whatever fonts you prefer in .ttf format.

After downloading the fonts you want, create a fonts directory under assets in your project. The path should be like this:

PROJECT-DIRECTORY/assets/fonts

Move the font files that you downloaded to this fonts directory.

We made a custom demo for .
No really. Click here to check it out.

Click here to see the full demo with network requests

Add the configuration to the project

If not already created, create a config file at the root of the project named react-native.config.js. Proceed by adding the following code inside module.exports:

module.exports = {
    project: {
        ios:{},
        android:{}
    },
    assets:['./assets/fonts/'],
}

Link the assets to the project

After the above steps have been done, we can simply run a command to link the fonts that we just added.

$ npx react-native link

… or:

$ yarn react-native link

That’s about it! After this command, we can see the fonts we added in the android/app/src/main/assets/fonts directory and in Info.plist (for Android and iOS respectively).

After this, you can use the custom fonts using their names, under the fontFamily style:

fontFamily: 'Yatra-One'

Adding fonts the Expo way

Expo is a great framework built over React Native and includes almost all the modules that are needed to build a fully functioning app.

expo-font is another way of adding fonts to a React Native app. In contrast to the previous method, this is more akin to initializing the fonts every time the app loads.

The initial step is the same — to fetch the fonts, create the “fonts” directory under assets and move the fonts there.

There are two ways to initialize fonts in an Expo app; using hooks for functional components at root, or using the async function for the class components.

(Note: Do not load the content with the custom fonts until the fonts are loaded themselves)

Using hooks to initialize the fonts

useFonts hooks are used to initialize the fonts, as demonstrated in this snippet:

import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useFonts } from 'expo-font';

export default function App() {
  const [loaded] = useFonts({
    Montserrat: require('./assets/fonts/Yatra-One.ttf'),
  });

  if (!loaded) {
    return null;
  }

  return (
    <View style={{flex:1}>
      <Text style={{ fontFamily: 'Yatra-One', fontSize: 27 }}>Yatra-One</Text>
    </View>
  );
}

Using the Async function to initialize the fonts

Fonts.loadAsync is used to initialize the fonts, as you can see in the following snippet:

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import * as Font from 'expo-font';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        fontsLoaded: false
    }
  }

  async loadFonts() {
    await Font.loadAsync({
      'Yatra-One': require('./assets/fonts/Yatra-One'),
    });
    this.setState({ fontsLoaded: true });
  }

  componentDidMount() {
    this.loadFonts();
  }

  render() {
    if (this.state.fontsLoaded) {
      return (
        <View style={styles.container}>
          <Text style={{ fontSize: 21 }}>Default Font</Text>
          <Text style={{ fontFamily: 'Yatra-One', fontSize: 27 }}>Yatra-One</Text>
        </View>
      );
    } else {
      return null;
    }
  }
}

Conclusion

React Native configuration and expo-font are both great ways for adding fonts to a React Native app.

In this tutorial, we went over how to add fonts using both the config-link approach and the expo-font approach. Both have their own benefits, so you can pick the one that works for you best as a matter of preference.

You can check out the official documentation of the expo-font for more detailed reference here.

LogRocket: Instantly recreate issues in your React Native apps.

LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.

LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.

Start proactively monitoring your React Native apps — try LogRocket for free.