Crear fuente (Font) personalizada para APP React Native con Expo

Tiempo de lectura: < 1 minuto

Hoy aprenderemos cómo podemos añadir una fuente personalizada (Font) usando React Native con Expo.

Lo primero que tenemos que hacer es descargar nuestra fuente, por ejemplo de https://fonts.google.com/

Ahora la guardaremos dentro de assets/fonts

Ahora iremos a nuestro entry point, en mi caso es app.tsx

Usaremos expo-font

import * as Font from 'expo-font';
import { useFonts } from 'expo-font';

export default function App() {
  const [fontsLoaded] = useFonts({
    'nombre_fuente': require('./assets/fonts/nombre_fuente.ttf'),
  });

  if (!fontsLoaded) {
    return null;
  }

  // Renderiza tu aplicación
}

Si queremos cargarla de forma nativa:

• Iremos al archivo app.json

{
  "expo": {
    "plugins": [
      [
        "expo-font",
        {
          "fonts": ["./assets/fonts/nombre_fuente.ttf"]
        }
      ]
    ]
  }
}

Con esto ya podremos utilizar uestra fuente:

fontFamily: 'nombre_fuente',