DEV Community

loading...

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

ajmal_hasan profile image Ajmal Hasan ・1 min read

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:
yarn react-native link
or
npx react-native link

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'

Discussion (0)

pic
Editor guide