Añadir fuente de texto (Font) personalizada en React Native

Tiempo de lectura: < 1 minuto

Hoy vamos a aprender cómo podemos añadir una fuente personalizada Font a nuestro proyecto de aplicación con React Native.

Lo primero que tenemos que hacer es descargar una fuente, podemos utilizar esta web: https://www.dafont.com/es/

Puedes descargar el formato .ttf o .otf

Importante: Recomiendo que reviseis las licencias de las fuentes descargadas para evitar sorpresas.

Guardamos nuestra fuente dentro del directorio assets/fonts

Creamos un archivo llamado react-native.config.js

Añadimos:

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

Y ejecutamos:

npx react-native-asset

Y para usarla podemos poner fontFamily con la fuente añadida:

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

Suponiendo que nuestra fuente se llama NombreFuente-Regular.ttf, debemos poner el nombre correcto.