Custom Font Not Working In React Native

I want to use a font from google fonts in my app. Here is the font. I have placed the .ttf file in app/fonts. package.json: { 'name': 'xxx', 'version': '0.0.1', 'priva

Solution 1:

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

Solution 2:

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'.

Solution 3:

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.

Solution 4:

I found out that for some fonts you need to run npx react-native-asset in order to make it work on Android. If it's not working within 3rd party components you have to add fontWeight: 'normal' to override some default values.

Solution 5:

The path could be incorrectly linked -

The path where react-native link stored the fonts was - android/src/main/assets/fonts

Path should be -android/app/src/main/assets/fonts

Even with react-native version 0.62 this problem exits