DEV Community

Hemendra Khatik
Hemendra Khatik

Posted on • Edited on • Originally published at blog.aamchora.space

Custom fonts in react-native.

Adding fonts in react-native app can be frustrating. If you are doing it for the first time. But trust me, it is as simple as it sounds. Follow the below steps carefully and it will work as expected.

  1. Download the fonts
  2. Create fonts folder inside the assets folder src/assets/fonts.
  3. Put all the font files inside the fonts folder.

react-native fonts

4.Now create react-native.config.js file in your app's root folder and paste below code in it.

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

Run the below command

npx react-native link

And voila, it's done now you can use the file name as your fontFamily name(don't put extension name after file name) and it will work like a charm.

Top comments (0)