Search
⌘K
    to navigateEnterto select Escto close

    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.

    Previous
    Next