Add custom fonts to your React Native application 2024 guide

This is a concise guide — on how to add a custom font to your react-native app (ReactNative CLI). We will add a few popular fonts. One of them will be the Roboto font for your React Native App.

Let’s Start:

1. Download your favorite font from the Google Fonts Web Page or any other sources
2. Copy the .ttf files to the folder, dedicated specifically to assets (in my case it is assets/fonts

3. Create a file called `react-native.config.js` in the project’s root folder:

module.exports = {
  // ...other config
  // add the line below with path to your fonts folder
  assets: ['./assets/fonts']
};

4. For react-native ≥ 0.69 run the command:

npx react-native-asset

In the terminal you will see something like this

Files changed in ios folder after running the command npx react-native-asset

Files changed in android folder after running the command npx react-native-asset

5. Configure your <Text /> component styles:

const styles = StyleSheet.create({
  text1: {
    fontFamily: 'NovaSquare-Regular',
    fontSize: 24,
  },
  text2: {
    fontFamily: 'Roboto-BlackItalic',
    fontSize: 24,
  },
  text3: {
    fontFamily: 'NovaSquare-Regular',
    fontSize: 24
  },
});

Enjoy your new custom fonts.

Some troubleshooting:

1. If you have problems defining fontFamily name. Take a look at the PostScript Name in the FontBook app on MacBook.

2. Don’t forget to rebuild your app after you have added a new font.

Image generated by DALL*E :)