Add a Custom Font in React Native

Tiempo de lectura: < 1 minuto

Reading time: < 1 minute
Today we are going to learn how we can add a custom Font to our application project with React Native.

The first thing we need to do is download a font, we can use this website: https://www.dafont.com/es/

You can download the .ttf or .otf format

Important: I recommend that you check the licenses of the downloaded fonts to avoid surprises.

We save our font inside the assets/fonts directory

We create a file called react-native.config.js

We add:

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

And we run:

npx react-native-asset

And to use it we can set fontFamily with the added font:

    buttonText: {
        fontFamily: 'FontName-Regular',
    },

Assuming our font is called FontName-Regular.ttf, we must use the correct name.