Learn React Native

Adding custom fonts in React Native 0.60+

Custom fonts can be added into React Native project(0.60+) with the following steps.

1. Get the font files needed for the project

The font files should be either in .ttf or .otf format. The font files can be obtained from Google fonts. Create a folder named fonts under the assets directory and place the font files in it.

2. Create a configuration file

Create a configuration file named react-native.config.js in the root project directory and add the following code:

1    module.exports = {
2        project: {
3            ios:{},
4            android:{}
5        },
6        assets:['./assets/fonts/'],
7    }

Link the newly added asset by running the following command:

yarn react-native link

or

npx react-native link

That's all, the font is now added and we can see the new font assets in android/app/src/main/assets/fonts in the case of android and changes in the Info.plist in case of iOS. Finally, re-run the app.

    ⌘F
      to navigateEnterto select Escto close
      Older
      Newer