Using Custom Fonts in React Native

If you are looking for the guide to use custom fonts in your React Native apps, this is the right place for you.

Adding custom fonts to your React Native apps is not a difficult task, but there are few tweaks that you need to do to make sure the custom fonts are set up correctly. I will share with you steps by steps in details to set up the custom fonts.

Prepare the fonts

First, we need to get the fonts ready. For this tutorial, we will use DancingScript font as the custom font. If you wish to use other font, you may download them from Google Fonts.

There is one thing you may need to take note, Android will use the font's file name as the font family, while iOS will use "PostScript name" as the font family. Let's take a look of the example below:

If we use these fonts as custom fonts, we can use fontFamily: "DancingScriptRegular" in Android to show the custom font. However, this may not work in iOS if the "PostScript name" is different than the font's file name. To check the "PostScript name" of the font, you can add the fonts to Font Book and view the details.

As the PostScript name for the font is "DancingScript-Regular" instead of "DancingScriptRegular", setting fontFamily: "DancingScriptRegular" in the style will not show the custom font in iOS.

Thus, it is always recommend to rename the font file to the "PostScript name" so that we can use the same fontFamily for both iOS and Android platform. So, let us rename our fonts.

Add fonts to assets

Next, we need to add the fonts to the assets. Create the directory assets/fonts and put all the fonts into the directory.

If you are using React Native >= 0.60

Since rnpm is deprecated, we will use the new method to link the assets. Create a file react-native.config.js and put the following codes:

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

If you are using React Native < 0.60

You may add the following codes into your package.json:

"rnpm": {
  "assets": [
    "./assets/fonts/"
  ]
}

Link the font assets

Once the fonts is in the right place, we can link them by running the follow command:

react-native link

To verify if your fonts is correctly linked, you can check if the fonts is copied to android/app/src/main/assets/fonts and added to Build Phases > Copy Bundle Resources of your iOS project.

Use the custom fonts in styles

Now you can use the font in your React Native app, just add fontFamily: YOUR_FONT_NAME to your Text or TextInput component and it will show the text and placeholder in custom font. I highly recommend always create a shared custom Text and TextInput in your React Native app so that you can apply the style to all the text and input in your app directly.

Bonus: Unlinking the fonts

Unfortunately, there is not command that can the fonts automatically, you will have to do it manually.

1. Remove the fonts in assets/fonts.
2. Remove the fonts in android/app/src/main/assets/fonts.
3. Remove reference of fonts in Resources of your iOS project. (This will remove the reference in the Build Phases > Copy Bundle Resources too.)

Thank you for reading, I hope you find this tutorial useful!