Using custom fonts in react native

#reactnative #react #javascript

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.

Latest comments (4)

Joaquin Guardado • Dec 9 '20 • Edited

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.plist

        <key>UIAppFonts</key>
        <array>
            <string>AntDesign.ttf</string>
            <string>Entypo.ttf</string>
            <string>EvilIcons.ttf</string>
            <string>Feather.ttf</string>
            <string>FontAwesome.ttf</string>
            <string>FontAwesome5_Brands.ttf</string>
            <string>FontAwesome5_Regular.ttf</string>
            <string>FontAwesome5_Solid.ttf</string>
            <string>Foundation.ttf</string>
            <string>Ionicons.ttf</string>
            <string>MaterialIcons.ttf</string>
            <string>MaterialCommunityIcons.ttf</string>
            <string>SimpleLineIcons.ttf</string>
            <string>Octicons.ttf</string>
            <string>Zocial.ttf</string>
            <string>Fontisto.ttf</string>
            <string>Audiowide-Regular.ttf</string>
        </array>

Error:

Multiple commands produce '/Users/../Library/Developer/Xcode/DerivedData/Sunny-cizcwsftlezikbexcuktuopmsmge/Build/Products/Debug-iphonesimulator/Sunny.app/Zocial.ttf':
...

Also run npx pod-install to link react-native-vector-icons` again.