Integración de fuentes personalizadas en React Native para plataformas iOS y Android

¿Estás buscando agregar un toque único a tu aplicación React Native mediante el uso de fuentes personalizadas? En este artículo, te guiaremos a través del proceso de integración de fuentes personalizadas en tus proyectos React Native tanto para las plataformas iOS como Android. Al final, tendrás una comprensión clara de cómo usar fuentes personalizadas de manera efectiva y evitar problemas comunes.

¿Por qué usar fuentes personalizadas en React Native?

Usar fuentes personalizadas en tu aplicación React Native puede:

• Mejorar el atractivo visual y la experiencia de usuario
• Crear una identidad de marca única
• Mejorar la legibilidad y accesibilidad

React Native proporciona soporte integrado para fuentes personalizadas, lo que facilita su integración en tus proyectos.

Agregar fuentes personalizadas a un proyecto React Native CLI

Paso 1: Descargar y agregar archivos de fuentes

1. Descarga los archivos de fuentes deseados (TTF u OTF) de fuentes como Google Fonts o Font Squirrel.
2. Crea un directorio assets/fonts en la carpeta raíz de tu proyecto.
3. Coloca los archivos de fuentes en el directorio assets/fonts.

Paso 2: Configurar react-native.config.js

1. Crea un archivo react-native.config.js en el directorio raíz de tu proyecto (si no existe).
2. Agrega el siguiente código al archivo:

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

Paso 3: Vincular las fuentes

Ejecuta el siguiente comando en tu terminal para vincular las fuentes:

npx react-native link

Paso 4: Usar las fuentes personalizadas

En tus componentes de React Native, usa la propiedad de estilo fontFamily para aplicar las fuentes personalizadas:

<Text style={{ fontFamily: 'CustomFontName', fontSize: 18 }}>
  Hola, fuente personalizada!
</Text>

Usar fuentes personalizadas con Expo

Paso 1: Instalar expo-font

Ejecuta el siguiente comando para instalar el paquete expo-font:

expo install expo-font

Paso 2: Cargar las fuentes

Usa el hook useFonts de expo-font para cargar las fuentes personalizadas:

import { useFonts } from 'expo-font'

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

  if (!fontsLoaded) {
    return null
  }

  return (
    <View style={styles.container}>
      <Text style={{ fontFamily: 'CustomFont', fontSize: 18 }}>
        Hola, fuente personalizada!
      </Text>
    </View>
  )
}

Problemas comunes y soluciones

Tiempo de carga de fuentes

Problema: La interfaz de usuario se renderiza antes de que se carguen las fuentes, lo que hace que aparezcan fuentes de respaldo.

Solución: Utiliza renderizado condicional para asegurar que la aplicación solo se renderice después de que se hayan cargado las fuentes.

Nombres de familia de fuentes no coincidentes

Problema: Nombres de familia de fuentes inconsistentes entre el archivo de fuente y el código.

Solución: Asegúrate de que los nombres de familia de fuentes coincidan exactamente entre el archivo de fuente y el código.

Ruta de fuente incorrecta

Problema: Usar la ruta incorrecta para el archivo de fuente.

Solución: Verifica la estructura de archivos y asegúrate de que las rutas coincidan con la ubicación exacta de los archivos de fuentes.

Usar formatos de fuente no soportados

Problema: Usar formatos de fuente no soportados por la plataforma de destino.

Solución: Verifica que el formato de fuente (TTF, OTF) sea soportado por la plataforma de destino (iOS, Android).

Conclusión

Integrar fuentes personalizadas en tu aplicación React Native es una excelente manera de mejorar su atractivo visual y crear una identidad de marca única. Al seguir los pasos descritos en este artículo y tener en cuenta los problemas comunes, puedes usar con éxito fuentes personalizadas en tus proyectos React Native tanto para las plataformas iOS como Android.

Preguntas frecuentes