Custom Fonts in React Native

Adding Custom Fonts in React Native

In React Native project src directory, we should create an assets directory. We will have a directory for each asset (SVG, Fonts, etc.). Therefore, create a fonts directory and paste the fonts that you downloaded. In the React Native project's root, create a file called react-native.

Font plays a vital role in building an adequate user interface for an application. Here are some of the issues that may face while implementing custom fonts in React Native:

  1. Fonts are not functional on Android
  2. Fonts are not functional because of already installed vector icons.

    3. Creating a New Application

    To initialize a React Native Project, paste the following into our terminal:

    Adding font files to the assets/fonts folder

    Please create a new folder with the name assets at the root of our project and create a sub-directory with the name fonts and all our font files.

    Creating Configuration file

    Create a react-native.config.js file at the project's root and add this code to it.

    Linking fonts files to the app

    Run the command as npxreact-native link

    Re-run the app

    To re-run the application, close it and re-run the application.

Using fonts

To use the fonts that were created, use I am a text with a font-family

Fonts are not functional on Android.

There can be many reasons for the fonts not working on Android:

  • Some fonts don’t work with the same font-family name format. Try changing the font-family name from NutinoSans-Bold to nutinosans_bold on Android. We can also define font family based on the platform.
  • Sometimes font doesn't work on Android because of the font weight. Try to remove it.
  • If the fonts are still not working, we need to remove the old font files from the assets/fonts folder and replace them with the new files with the names in snake_case like ogbrother_medium and nutinosans_bold. Try linking these files.
  • Sometimes fonts don't work with font-weight: "bold." Try to replace this with a font value like font-weight: "700".