DEV Community

Ajmal Hasan
Ajmal Hasan

Posted on • Updated on

Add custom fonts to react-native. Simple Latest Steps:

1)Get/Download the font files needed for your project. You need to obtain the required font files either in .ttf or .otf format and rename like this format 'Ubuntu-Bold.ttf'.

2)Create a configuration file react-native.config.js in the root project directory and add the code below:

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

assets path is where you have put your font files

3) Link the newly added asset by running the command:
npx react-native-asset

4)All fonts will be linked and you can see that in terminal.
You can use it in react native text component as
fontFamily: 'Ubuntu-Bold'

Note:
Follow this link if font does not reflect in iOS.

Top comments (0)