DEV Community

T Sudhish Nair
T Sudhish Nair

Posted on

3 2

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.

Sentry mobile image

Mobile Vitals: A first step to Faster Apps

Slow startup times, UI hangs, and frozen frames frustrate users—but they’re also fixable. Mobile Vitals help you measure and understand these performance issues so you can optimize your app’s speed and responsiveness. Learn how to use them to reduce friction and improve user experience.

Read the guide →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs