Hi everyone!
Last week in the UK we had Halloween (if you’re reading this on the right week of course), and around the world celebrations were happening for all kinds of events, including Finados Day, aka Day of the Dead. At hackajob HQ, we celebrated in style by doing a horror-themed escape room... and eating pizza 😁. However, this tutorial isn’t about any of this, and instead, we’re going to be showing you how to add Custom Fonts to an existing React Native project.
When starting a new project, you should already have a few default fonts readily available but sometimes; they’re just not enough. So first things first, we recommend taking a look at the Google Fonts repository.
For this tutorial we’ve chosen two different fonts to test: Heebo and Bowlby_One.
To begin with, initiate a new project and then create a folder within the root of your project called ‘assets’, as well as another one titled ‘fonts’ within the assets folder itself.
Drag your chosen fonts inside the new folder:
If you’re using one of the latest versions of React Native (otherwise known as 0.60), create a file called ‘react-native.config.js’ using the following code:
If you're using an older version than 0.60, simply follow the code below and put it in your package.json:
Now, run the following command in your terminal:
Note: If you’ve already started the project on the simulator, you’ll need to run it again:
or
If you add new fonts later on, remember to link them once more.
In terms of next steps, you’ll want to be figuring out the name of the family font you want to use. In this case, it’s normally the same name as the downloaded font e.g. Heebo-Black, Heebo-Bold, Heebo-ExtraBold.
You’ll now need to declare one of each font within a text component in order to see how they render within the simulator:
As well as how they will render on your app:
Helping you to enrich the look of your new app, you can find the code in its entirety here.
Like what you’ve read? Make sure to check out the rest of our articles regarding all things React Native.