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'
Add your fonts file in
Project folder/android/app/src/main/assets/fonts/font_name.ttf
- Restart the package manager using
react-native run-android
- 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.