DEV Community

T Sudhish Nair
T Sudhish Nair

Posted on

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:

module.exports = {
        project: {
            ios:{},
            android:{}
        },
        assets:['./assets/fonts/'],
    }
Enter fullscreen mode Exit fullscreen mode

3. Link the font assets

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.

Discussion (0)