Basics | Fonts in React-Native

Basics with Swair.

You need to add custom fonts to your app, sometimes classics are not enough, sometimes it’s not according to your app’s brand, whatever it is we’re gonna learn today how to use custom fonts in react-native.

Which is easier than you thought, you might get linking errors, you might know how to make it work for iOS but with complete guide, you can have it up and running in 5 minutes.

Let’s get coding:

First off you’re gonna need to get fonts from somewhere, I mostly get them from these two links but there are hundred of places

• Google Fonts
• DaFont

Just open your favorite image pack & download it to your machine:

Now, open the downloaded folder, extract files from it and get .ttf fonts. This is what we’ll be needing.

Now, let’s get to real code..

in your react-native app, expand your assets folder and create new folder named Fonts and inside throw away all your fonts.

On project root create a new file named react-native.config.js

Now export your assets module with relative path of where your fonts are placed, in our case:

module.exports = {
assets: ['./src/assets/Fonts']
}

Click save and close the file.
Now run following command in your app’s terminal:

react-native link

It’ll link the assets to your app.
Now we’re good to use the fonts for our android applications but for iOS we will have to do an additional step, that we’ll do later.
Just to be sleek create another file named font.js wherever you keep your utilities and add your font keys to it for easy use throughout all app.

const Fonts = {
REGGAS_REGULAR: 'ReggaeOne-Regular',
BERNADATTE: 'Bernadette'
}
export default Fonts;

Now in your App.js

import Fonts from './src/utilites/Font'

You can use these fonts in your buttons and text displays or anywhere.

<Text style={ fontSize: 40, fontFamily: Fonts.BERNADATTE }>
{HELLO_WORLD}
</Text>

iOS

Go to xcode -> project target -> build phases -> link binary with libraries -> Add other-> *Add your font*

Rebuild the project from xcode & you’ll be good to go.

That’s how easy it is.
Github: https://github.com/swairAQ/CustomizationReactNative