How to add custom font in react native android

UPDATE

Many answers are here for adding 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']
};

For those running on react-native version < 0.69.x

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

PS Make sure you have the right path for the fonts folder before running react-native link command

---

For those running on react-native version >= 0.69.x, Since link is deprecated so react-native link will not work anymore, the command react-native link is replaced by npx react-native-asset.

More info about the release can be seen here: https://github.com/react-native-community/cli/releases/tag/v8.0.0

Put all your fonts in you React-Native project directory

./assets/fonts/

Add the following line in your package.json

"rnpm": {
  "assets": ["./assets/fonts"]
}

finally run in the terminal from your project directory

$ react-native link

to use it declare this way in your styles

fontFamily: 'your-font-name without extension'

If your font is Raleway-Bold.ttf then,

fontFamily: 'Raleway-Bold'

1. Add your fonts file in

   • Project folder/android/app/src/main/assets/fonts/font_name.ttf
2. Restart the package manager using react-native run-android
3. Then you can use your font in your style e.g
   • fontFamily: 'font_name'

Check here for further examples Custom Font Examples

Update:

From the cli docs, "rnpm" is deprecated and support for it will be removed in next major version of the CLI.

Instead, create a react-native.config.js in your project folder

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

Put your fonts in ./assets/fonts. Reference your fonts (e.g. McLaren-Regular.ttf) in the styles prop, {fontFamily: 'McLaren-Regular'}. If you're using styled components, then font-family: McLaren-Regular

No linking or legacy build settings needed for either platforms. If that didn't work (sometimes it doesn't for me), run npx react-native link, even if you're using autolinking.