If you are looking for the guide to use custom fonts in your React Native apps, this is the right place for you.
Adding custom fonts to your React Native apps is not a difficult task, but there are few tweaks that you need to do to make sure the custom fonts are set up correctly. I will share with you steps by steps in details to set up the custom fonts.
Prepare the fonts
First, we need to get the fonts ready. For this tutorial, we will use DancingScript font as the custom font. If you wish to use other font, you may download them from Google Fonts.
There is one thing you may need to take note, Android will use the font’s file name as the font family, while iOS will use “PostScript name” as the font family. Let’s take a look of the example below:

If we use these fonts as custom fonts, we can use fontFamily: "DancingScriptRegular"
in Android to show the custom font. However, this may not work in iOS if the “PostScript name” is different than the font’s file name. To check the “PostScript name” of the font, you can add the fonts to Font Book and view the details.

As the PostScript name for the font is “DancingScript-Regular” instead of “DancingScriptRegular”, setting fontFamily: "DancingScriptRegular"
in the style will not show the custom font in iOS.
Thus, it is always recommend to rename the font file to the “PostScript name” so that we can use the same fontFamily
for both iOS and Android platform. So, let us rename our fonts.
Add fonts to assets
Next, we need to add the fonts to the assets. Create the directory assets/fonts
and put all the fonts into the directory.
If you are using React Native >= 0.60
Since rnpm
is deprecated, we will use the new method to link the assets. Create a file react-native.config.js
and put the following codes:
module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts/'], };
If you are using React Native < 0.60
You may add the following codes into your package.json
:
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
Link the font assets
Once the fonts is in the right place, we can link them by running the follow command:
react-native link
To verify if your fonts is correctly linked, you can check if the fonts is copied to android/app/src/main/assets/fonts
and added to Build Phases > Copy Bundle Resources
of your iOS project.
Use the custom fonts in styles
Now you can use the font in your React Native app, just add fontFamily: YOUR_FONT_NAME
to your Text
or TextInput
component and it will show the text and placeholder in custom font. I highly recommend always create a shared custom Text
and TextInput
in your React Native app so that you can apply the style to all the text and input in your app directly.
Bonus: Unlinking the fonts
Unfortunately, there is not command that can the fonts automatically, you will have to do it manually.
- Remove the fonts in
assets/fonts
. - Remove the fonts in
android/app/src/main/assets/fonts
. - Remove reference of fonts in
Resources
of your iOS project. (This will remove the reference in theBuild Phases > Copy Bundle Resources
too.)
Thank you for reading, I hope you find this tutorial useful!