How to add a custom font in a React Native application

Add a new custom font to your project will no longer be a problem

Sometimes it is necessary to add a new font in a React Native application. Even though it is a simple process, it has some specific details that can make your life harder. This post aims to describe all the necessary steps and details of the process.

First of all, you must have a React Native application and a font type you want to use on it. For the purpose of creating an example, I will download the Barrio font from Google Fonts. Its link can be found in the references section of this text.

In the image below, you can see its design:

After selecting the font, download its .tff or .otf file, with the correct weight you want already, it will not be possible to change it dynamically in code. Then, you should check the font name, more specifically the PostScript Name of it. If you are using a Mac computer, you can check it with the help of Font Book.

Next, you have to rename the .ttf or .otf file you have for whatever is written in the PostScript Name of the font, in this case, the name of the file will be Barrio-Regular.ttf. Following, you should copy this file in your React Native app, inside the assets/fonts directory.

Additionally, it is necessary to add a react-native.config.js file and connect the fonts to it. Its content should be something like the code below:

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

After this, you should run the npx react-native-asset command in your terminal. It will link the font with your android and ios app and it will cause changes in some files like android/link-assets-manifest.json, ios/link-assets-manifest.json, project.pbxproj, Info.plist, android/app/src/main/assets/fonts.

Finally, you can call it inside your application, for instance, using:

export const Fonts = {
  barrio: 'Barrio-Regular',
};

<View
  style={{
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  }}
>
  <Text
    style={{
      fontFamily: Fonts.barrio,
      fontSize: 48,
    }}
  >
    Whereas disregard and contempt for human rights have resulted
  </Text>
</View>

So, it is possible to check the result in your app. Just a reminder that it is necessary to build it again to be able to check the changes in the font.

Pro tip: Font Weight

You must not change the fontWeight attribute directly in the code. Otherwise, you will get an error in Android and will not be able to see the custom font on it. Instead, if necessary, add multiple .ttf files containing the different fonts, for example, it would be possible to also have a Barrio-Light.ttf and use it when necessary.

References

https://fonts.google.com/specimen/Barrio

https://support.apple.com/guide/font-book/welcome/mac

https://reactnative.dev/docs/text-style-props

https://github.com/facebook/react-native/issues/28854