Using custom fonts in react native
October 05, 2024
5 min read
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
jsmodule.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
from the root of the project.react-native link - 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
. Open the plist file and scroll to the bottom of the page. You should see the name of the font in a key calledios/{project}/Info.plist
. This is how mine looks like:UIAppFonts
plist<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
. Once in that folder you should be able to see all the fonts. If not it means something has gone wrong.android/app/src/main/assets/fonts
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
in your project, create a react-native.config.js and paste in the snippet above and then runroot/assets/fonts
in your terminal or console.react-native link
Subscribe to my newsletter
You won't receive any spam! ✌️