Using Custom Fonts on React Native CLI and Expo: A Primer

I am what some may call a hoarder of fonts (typefaces is technically the right term, but ¯_(ツ)_/¯). I don't deny it; I like the look and the sometimes artistic nature these items can carry. And far from it being just serif or sans Serif, custom fonts if anything, create a sense of distinction or "identification" for an app (even Comic Sans!)😁

It is a good case to always try to use different fonts from the basic text available by default on both React Native and Expo. Fortunately, we are able to use custom fonts in relatively straight-forward ways on both platforms.

Mini-rant:

A thing about me is that I am a real supporter of Expo for mobile development. I understand the concerns of startups and other companies who cannot fathom maintaining such a large codebase on a "semi-full" SDK line like Expo. That is good and fine, but for the single developer who is working on a personal project, whether beginner or experienced, I really think Expo is a much better experience overall and does not give away as much as others may think.

Rant over.🙂

If you don't believe, look hereto see what an app built with Expo looks like. There are other open cool source projects listed here.

So was I right, or was I right? 😉

1. React Native CLI

   In this process however, setting up Custom Fonts for React Native CLI is relatively easier than with Expo (I said relatively). Here are the steps:

a) Setup your new React Native project or open an existing project where you want to use these custom fonts. You know how to do this. 👍

b) Download your Custom Fonts. A simple look through the web shows the popularity of Google Fonts. Indeed, it is pretty decent and straightforward to download. Just (list steps here). Other options I would advise to consider include: -dafont -Font Fabric -The League

c) Once you get your required font(s), it is best practice as a design pattern to include it in its own folder. A common way of putting this is creating a fonts folder within the assets folder, i.e. "assets/fonts" or "src/assets/fonts".

d) Next, we create a file at the root of the project directory called react-native.config.js(please ensure you get the naming correctly). You then type the following into the file

module.exports = {
    project: {
        ios: {},
        android: {}
},
    assets: ["./assets/fonts/"]
}

e) Finally, link the related dependencies with your project using the react-native link command on your terminal. This command should be unnecessary for React Native >= 0.60 but kindly do so all the same.

2) ###Expo SDK:

The procedure for Expo can be split in two ways: This follows from after the fonts have been downloaded and saved into the project directory as done in the RN CLI example. The first is pretty much well described in the docs seen (here). In it, we have this: (code_block) As we can see here, there are just a couple of things to take note of here which include:

But the method I use (and which should be updated on the Expo docs) requires way less effort. It makes use of a custom hook called useFonts created by the Expo team. You download it using the command (command) Now, employ this in your project like so

[WHOLE EXAMPLE]

Some rare challenges:

In time working with fonts, here are some problems that may occur. P.S: Notice how they are majorly associated with the CLI platform (😎)

• Font format type (.otf as against .ttf);
• Renaming of font files. A little digging showed this happens because the two platforms read the names a bit differently (link article here)
• It has also been reported by some Android developers that the fontWeight prop causes challenges in rendering some fonts so yeah, that too.

Conclusion:

As I said earlier, fonts are really a small but great way to make your app stand out. Little strings of art littered across your screen add to a better User Experience which should always be amongst the top priority when we are on the subject of mobile development.

Thanks for reading, friends.

Cheers.