How to add custom fonts in React Native

Editor’s note: This article was last updated on 30 October 2023 based on the latest version of React Native (0.72, at the time of writing).

Fonts are the building blocks of a great user experience. Using custom fonts can provide your apps with a unique identity to your project, helping your project stand out in a competitive marketplace.

In this guide, we will explore ways to add custom fonts in a React Native app using Google Fonts. To follow along, you should be familiar with the basics of React Native or the Expo SDK, including JSX, components (class and functional), and styling.

Adding custom fonts to a React Native CLI project

For our project, we will take a look at how we can add custom fonts to a React Native CLI project by building a basic application using Google Fonts. Google Fonts is a library for free, open source fonts that can be used while designing web and mobile applications.

To bootstrap the React Native CLI project, run the following command in your terminal:

npx react-native@latest init CustomFontCLI

CustomFontCLI is the name of our project folder. Once the project has been successfully installed, you will see the image below:

Open your project in your preferred IDE to get started. In this tutorial, we will use VS Code.

Once the project has been bootstrapped, we will move on to getting the fonts we want to use. We’ll go over how to import them and use them in our project.

Downloading and integrating Google Fonts into our project

In this project, we will demonstrate custom font integration using two fonts: QuickSand and Raleway, which you can find on Google Fonts.

Find your desired fonts in Google Fonts, select the styles you want (e.g., Light 300, Regular 400, etc.), and download the entire font folder using the Download all button:

The folder will be downloaded as a ZIP file with a font folder. Inside the folder, there is a static folder where all the TTF files reside. Copy and keep the TTF files.

In the next section, we will go through integrating these fonts’ TTF files into our React Native CLI project.

Integrating the Google Fonts into the project

Create an assets folder in the root directory of your project, with a subfolder called fonts. Then, paste all the TTF files you copied from the static folder earlier into the fonts folder of your project:

Next, create a react-native.config.js file in the root directory and paste the code below inside it:

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

Linking the fonts to be used in project files

We have successfully integrated the font files into our project. Now we need to link them so we’ll be able to use them in any files inside the project. To do that, run the following command:

npx react-native-asset

Once the assets have been successfully linked, you should see the following message in your terminal:

Then, in your App.js file, paste the following code:

import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.quicksandRegular}>
        This text uses a quick sand font
      </Text>
      <Text style={styles.quicksandLight}>
        This text uses a quick sand light font
      </Text>
      <Text style={styles.ralewayThin}>
        This text uses a thin italic raleway font
      </Text>
      <Text style={styles.ralewayItalic}>
        This text uses a thin italic raleway font
      </Text>
    </View>
  );
};
export default App;
const styles = StyleSheet.create({
  container: {
    backgroundColor: 'lavender',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  quicksandLight: {
    fontFamily: 'Quicksand-Light',
    fontSize: 20,
  },
  quicksandRegular: {
    fontFamily: 'Quicksand-Regular',
    fontSize: 20,
  },
  ralewayItalic: {
    fontFamily: 'Raleway-Italic',
    fontSize: 20,
  },
  ralewayThin: {
    fontFamily: 'Raleway-ThinItalic',
    fontSize: 20,
  },
});

This is a basic App.js file with four texts being styled, each by different font styles of Raleway and Quicksand. Essentially, we are rendering the JSX with four texts to display on the screen and React Native’s StyleSheet API to append different fontFamily styles to each of the Text components.

Let’s see the output:

Using custom fonts in React Native with Expo

In this section, we will learn how to use custom fonts with Expo. Expo supports two font formats, OTF and TTF, which work consistently on iOS, Android, and the web. If you have your font in another format, you’ll need advanced configurations.

First, create a new Expo project by running this command:

npx create-expo-app my-app

Once the project has been successfully installed, start the development server by running npm run start and choose either the iOS or Android option to open your project.

You should see this when your simulator finishes loading the project:

Using Google Fonts

Because we are adding the Raleway and Quicksand fonts as our custom fonts, we will install these two packages:

@expo-google-fonts/raleway
@expo-google-fonts/quicksand

If you have other Google Fonts you want to use, you can check here for the available fonts with Expo support.

Integrating the custom Google Font in the Expo project

In your App.js file, paste the following code block:

import { Raleway_200ExtraLight } from "@expo-google-fonts/raleway";
import { Quicksand_300Light } from "@expo-google-fonts/quicksand";
import { useFonts } from "expo-font";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
export default function App() {
  const [fontsLoaded] = useFonts({
    Raleway_200ExtraLight,
    Quicksand_300Light,
  });
  if (!fontsLoaded) {
    return <Text>Loading...</Text>;
  }
  return (
    <View style={styles.container}>
      <Text>This text has default style</Text>
      <Text style={styles.raleway}>This text uses Raleway Font</Text>
      <Text style={styles.quicksand}>This text uses QuickSand Font</Text>
      <StatusBar style="auto" />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  raleway: {
    fontSize: 20,
    fontFamily: "Raleway_200ExtraLight",
  },
  quicksand: {
    fontSize: 20,
    fontFamily: "Quicksand_300Light",
  },
});

Here, we imported Raleway_200ExtraLight and Quicksand_300Light from their respective packages. The useFonts Hook is used to load these custom fonts asynchronously. The result from the useFonts Hook is an array of Boolean values that was destructured using the syntax const [fontsLoaded] to access the Boolean value that it returns.

If the font(s) is successfully loaded, the result will be [true, null] , which means fontsLoaded is true. If unsuccessful, it will return [false, null]. And if the font is not loaded yet, we’ll return a Loading text.

If the fonts that are passed to the useFont Hook (as shown in the code block above) have loaded, then render the app, and the font we specified should be used.

Let’s see what this looks like in our simulator:

Using a custom font

Let’s say you have a personal React Native project you are building and you have been given custom fonts that are not among the available Google Fonts supported by Expo.

First, you will need to download the font file into your project and install the expo-font package. For this tutorial, I downloaded Source Code Pro from FontSquirrel as my custom font.

Create a folder called assets and within it, create a fonts folder, just like you did with the React Native CLI. Then, get and copy the font files from the fonts folder onto your machine and into your project like so:

In your App.js file, paste the following code:

import { useFonts } from "expo-font";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
export default function App() {
  const [fontsLoaded] = useFonts({
    "SourceCodePro-ExtraLight": require("./assets/fonts/SourceCodePro-ExtraLight.otf"),
    "SourceCodePro-LightIt": require("./assets/fonts/SourceCodePro-LightIt.otf"),
  });
  if (!fontsLoaded) {
    return <Text>Loading...</Text>;
  }
  return (
    <View style={styles.container}>
      <Text style={styles.default}>This text has default style</Text>
      <Text style={styles.sourcepro}>This text uses Source Pro Font</Text>
      <Text style={styles.sourceprolight}>This text uses Source Pro Font</Text>
      <StatusBar style="auto" />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  default: {
    fontSize: 20,
  },
  sourcepro: {
    fontSize: 20,
    fontFamily: "SourceCodePro-ExtraLight",
  },
  sourceprolight: {
    fontSize: 20,
    fontFamily: "SourceCodePro-LightIt",
  },
});

Just like with Google Fonts integration, the useFonts Hook is used to load the font files from the font folder, which returns a true or false value based on whether the font is loaded successfully or not.

If fontsLoaded is not true, i.e., the fonts specified within the useFonts Hook have not been loaded successfully, we will return a Loading… text. Otherwise, we render the app component and use the custom font(s) that has been loaded:

As shown in the simulator output above, the first text that has the default style uses the default fontFamily style, while the following two texts use the SourceCodePro-ExtraLight and SourceCodePro-Light font family that has been used to style the text, respectively.

Common pitfalls when working with custom fonts in React Native

When working with custom fonts in React Native, there might be some drawbacks you’ll encounter:

1. Mismatched font family names: As discussed in earlier sections, it’s crucial that font family names are consistent. For example, if you import a font as SourceCodePro-ExtraLight.otf but then load it into the application under a different path or file name, such as /assets/fonts/SourceCodePro-ExtraLight.ttf, this will cause the application to throw an error because there has been a fontFamily name mismatch
2. Using unsupported font formats: When working with custom fonts, it’s important to verify that the system you’re working on (iOS, Android, or web) supports the font format you are using (e.g., .ttf, .otf). If not, unexpected errors may occur during development
3. Performance impact: When adding custom fonts in your React Native applications, be mindful of their file size (measured in kb/mb). Large font files can significantly increase an app’s loading time, especially when custom fonts are being loaded

Conclusion

As explored in this article, integrating custom fonts in React Native applications is not just a technical enhancement but a strategic approach to improving user experience. Whether using Expo or the React Native CLI, the process will significantly contribute to your app’s aesthetic and usability.

Check out the GitHub repo for this project using the React Native CLI, and Expo.