Blog original posted here by kennymark
Using custom fonts in react native can be tricky or hacky to say the least. If you search for how to use custom fonts in react native on Google, the top results are filled with long blog posts or tutorials that are either outdated or overly complex. Most of these tutorials also seem to ignore setting up fonts on Android.
What if I told you there was a simple way to get custom fonts working on both IOS and Android with minimal set up?. Let’s say you want to use the Work Sans font from Google Fonts in your new application.
Let starts by first downloading the font from Google Fonts.
After downloading the font. Follow the steps below
- Create an assets folders in the root of your project with command
mkdir assets
. - Go to the asset folders and create a fonts folder with command
cd assets && mkdir fonts
. - Go back to the root of your folder and a create a file named react-native.config.js if it does not already exist.
- Copy and the paste the code below into your react-native.config.js file
module.exports = {
assets: [‘./assets/fonts’]
}
- Ensure the fonts folder contains all the fonts you are going to need for your project in a ttf format. In my case, I will be only using the Work Sans font.
- Once that is done, just run
react-native link
from the root of the project. - Voila!. You now have custom fonts set up.
Verify your fonts work properly
The best way to first verify if your fonts are going to work is to first if they have been successfully migrated to the each platform. For IOS, navigate to ios/{project}/Info.plist
. Open the plist file and scroll to the bottom of the page. You should see the name of the font in a key called UIAppFonts
. This is how mine looks like:
<key>UIAppFonts</key>
<array>
<string>Ionicons.ttf</string>
<string>Spartan.ttf</string>
<string>WorkSans.ttf</string>
</array>
On Android this works slightly differently. We need to navigate to android/app/src/main/assets/fonts
. Once in that folder you should be able to see all the fonts. If not it means something has gone wrong.
Gotchas
- Please ensure you are using react native v0.60 or greater. This only works on React Native version 0.60 and up.
- Check your font names. Ensure the font name you are using in your project is the actual name of the font. For example, when you download the Work Sans font and extract it from the zip file, all the files will most likely have different file names. It might look like Work+Sans-Bold.tff but using the exact file name in your react native font-family might cause issues because that might actually not be the font name. To ensure you actually are using the real font name, you can double-click the font. When the corresponding app opens on your machine, the name you see there will mostly likely be the name of the font.
Conclusion
Using custom fonts in react can be really simple if done right but can also be a hassle if you don't dont do the right things in order. Download the font, extract it and move the fonts using are going to use into the root/assets/fonts
in your project, create a react-native.config.js and paste in the snippet above and then run react-native link
in your terminal or console.
Top comments (4)
Awesome tutorial! Thank you Kenneth. I just wanted to add that this produces a conflict with react-native-vector-icons. If you get the following error when building for ios, just run
npx react-native unlink react-native-vector-icons
to solve it. Also note you may have to add the UIAppFonts from react-native-vector-icons back to the info.plistError:
Also run
npx pod-install
to link react-native-vector-icons` again.This worked for me, thanks
Great article! thank you
how do i actually use the file in my app code to change the screens fonts