How to import custom fonts in a React Native project

I will be using Expo's expo-font package

Image by SamuelFrancisJohnson on Pixabay

What is a custom font

The term custom font can be confusing but in context of this article, I’m describing a font you wouldn’t find on the Google fonts website or any third party library. It’s a font a designer/client made and wants you to use in an application.

How to import custom fonts with Expo Font

To get started, you’ll need to import the expo-font package

npx expo install expo-font

If you’re using a bare React Native project, you’ll need to follow additional instructions. If you have access to a custom font from a designer, I encourage you to use that. If not, you can simulate the process by heading over to the Google fonts website and download your favorite font. I decided to download the whole Wix collection and imported the files into my fonts directory .

useFonts

After placing the fonts you downloaded in your fonts directory, you’ll need to make them accessible to your application. To accomplish this, you’ll need to use a function from the expo-font package called useFonts.

Here’s an example 👇🏾

The useFonts function takes an object with the key being the name (you can name it whatever you want) we’ll reference in our style object (i.e., “WixBold”) and the value being the location of the font we want to use.

Under the hood this function is using an async function called loadAsync. Once our fonts are loaded, the promise will be fulfilled and the rest of our code will execute. If they’re not loaded, we return null (null is optional here). If you want to learn the fundamentals of asynchronous behavior, I encourage you read this article.

Here’s an example of what “WixBold” would look like.

How to use custom fonts with reusable components

You might be wondering if you only have access to your custom fonts in App.js/ts. The answer to this question is no. Once the fonts are loaded, you can access them throughout your app. I’m currently using customs fonts with a theming system for a personal project I’m working on. 👇🏾

Alternatives to expo-font

An alternative to the expo-font package is the expo-google-fonts package. The main difference between the two is the expo-google-fonts package doesn’t require you to download a font from the google fonts website. Instead you “pre-bake” them in your app by installing them in the terminal. This is fine if the client isn’t using a custom font they or a designer created.

Thanks for reading and don’t forget to comment, share and subscribe if you gained value from this article.

Ways to support my newsletter

🖥 If you believe this content is valuable, share it on social media

🎤 If you believe I would be a good fit for a podcast, let your favorite podcaster know

Connect with me

Connect with me on LinkedIn!

Connect with me on Twitter!