Custom font not working in React Native

Many answers are here for custom font in react-native for version < 0.60

For those who are using react-native version > 0.60 , 'rnpm' is deprecated and custom fonts will not work.

Now, in order to add custom font in react-native version > 0.60 you will have to :

1- Create a file named react-native.config.js in the root folder of your project.

2- add this in that new file

module.exports = {
project: {
    ios: {},
    android: {},
},
assets: ['./assets/fonts']
};

3- run react-native link command in the root project path.

4- run it using react-native run-android or react-native run-ios command


In case somebody is reading this because their setup is fine and custom fonts work on iOS and in some cases don't work on Android:

Additionally to the installation answers given above - make sure you are not setting font fontWeight parameter (or other extra font transformation in styles). In my case it 'broke' custom font, so I had to add and use font ttf with variants (like Roboto-Thin, Roboto-Bold etc) in stead of setting bold in styles.

Also worth to notice: Manuel Hernandez found out in comment below that it is possible to use i.e. fontWeight:800 in stead of fontWeight:'bold'.


Fonts in React Native are handled in the same way as in native applications, as assets to the native project.

In iOS, you have to add them as resources. You can have a good description here.

In Android you have to add them as assets. Here you can see how to.

Also note that the name of the font in iOS is the one contained in the metadata of the .ttf file, whereas in Android they are matched by the file name and several suffixes.