Búsqueda de sitios web

Una guía sobre el uso de fuentes personalizadas en React Native


Siga principios tipográficos sólidos y agregue algo de personalidad a su aplicación con una fuente personalizada.

React Native proporciona varios estilos de fuente predeterminados para elegir al crear su aplicación. Sin embargo, para ofrecer a su aplicación la originalidad e individualidad que necesita para destacarse en un mercado abarrotado, es posible que de vez en cuando necesite utilizar fuentes personalizadas.

Aprendamos cómo aplicar fuentes personalizadas al crear su próximo proyecto de React Native.

Comprender los formatos de archivos de fuentes

Con React Native, puedes agregar archivos de fuentes personalizados a un proyecto y personalizar la apariencia de los elementos de texto en tus aplicaciones. Estas fuentes personalizadas vienen en archivos de fuentes con diferentes formatos de archivo. Los archivos contienen información de estilo codificada para un tipo de fuente específico.

Los formatos de archivos de fuentes más comunes que utilizará en el desarrollo móvil de React Native son:

  • Fuente TrueType (TTF): este es un formato de archivo de fuente común que admiten la mayoría de los sistemas operativos y aplicaciones. Los archivos TTF son relativamente pequeños y pueden contener muchos caracteres.
  • Fuente OpenType (OTF): es similar a TTF pero también puede contener funciones tipográficas avanzadas. Los archivos OTF son más grandes que los archivos TTF y no todas las aplicaciones los admiten.
  • Fuente OpenType integrada (EOT): los archivos EOT están comprimidos y pueden incluir información de gestión de derechos digitales (DRM) para evitar el uso no autorizado. Sin embargo, no todos los navegadores admiten EOT y, en general, no se recomienda su uso en proyectos modernos.

Al utilizar fuentes personalizadas en un proyecto, es importante elegir un formato de archivo de fuente que satisfaga las necesidades del proyecto. Esto puede implicar factores como la compatibilidad con la plataforma de destino, el tamaño del archivo, los requisitos de licencia y la compatibilidad con funciones tipográficas avanzadas.

Importación y aplicación de archivos de fuentes en React Native

Puede descargar un archivo de fuente desde cualquier lugar de Internet e importarlo a su proyecto personal de React Native para usarlo. Sin embargo, existen muchos sitios web buenos y seguros para descargar fuentes gratuitas de forma segura.

Para importar un archivo de fuentes a su proyecto React Native, cree un directorio assets/fonts en la raíz de su proyecto y mueva los archivos de fuentes a él.

Los pasos necesarios para usar fuentes personalizadas varían cuando se trabaja con un proyecto puramente generado por React Native o un proyecto de React Native administrado por Expo.

Reaccionar CLI nativa

Si está trabajando con un proyecto generado por la CLI de React Native, cree un archivo react-native.config.js y defina estas configuraciones dentro de él:

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

Esta configuración le indica al proyecto que incluya recursos de fuentes almacenados en el directorio "./assets/fonts/" para que la aplicación pueda acceder a ellos al representar elementos de texto.

Luego puede vincular la carpeta assets a su proyecto ejecutando lo siguiente:

npx react-native-asset

Esto solo funcionará en versiones más nuevas de aplicaciones React Native desde 0.69 en adelante. Los proyectos más antiguos de React Native deberían ejecutar este comando en su lugar:

npx react-native link

Ahora puedes usar las fuentes personalizadas vinculadas como lo harías normalmente en tu estilo CSS llamando su nombre exacto en el estilo de familia de fuentes:

<Text style={styles.fontText}>Hello, World!</Text>
const styles = StyleSheet.create({
    fontText: {
      fontFamily: 'Tilt Prism',
      fontSize: 20,
    },
});

Expo-CLI

Para proyectos generados por Expo, debe instalar la biblioteca expo-fonts como una dependencia para importar y aplicar fuentes personalizadas. Instálalo con este comando:

npx expo install expo-font

Ahora puedes usar expo-fonts en tu archivo de proyecto de esta manera:

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import * as Font from 'expo-font';
const CustomText = (props) => {
  const [fontLoaded, setFontLoaded] = useState(false);
  useEffect(() => {
    async function loadFont() {
      await Font.loadAsync({
        'custom-font': require('./assets/fonts/CustomFont.ttf'),
      });
      setFontLoaded(true);
    }
    loadFont();
  }, []);
  if (!fontLoaded) {
    return <Text>Loading...</Text>;
  }
  return (
    <Text style={{ ...props.style, fontFamily: 'custom-font' }}>
      {props.children}
    </Text>
  );
};
const App = () => {
  return (
    <View style={styles.container}>
      <CustomText style={styles.text}>Hello, world!</CustomText>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});
export default App;

Podría renovar y mejorar mejor el bloque de código anterior aplicando el patrón de diseño de contenedores y componentes de presentación.

Aquí está el resultado de las aplicaciones React Native CLI y Expo CLI:

Configurar una fuente personalizada como fuente predeterminada para su aplicación Expo

Es posible que desee utilizar una fuente personalizada como fuente predeterminada para toda su aplicación React Native en lugar de aplicarla a cada componente Text individualmente. Para hacer esto, puede usar defaultProps del componente Text para establecer la familia de fuentes predeterminada para todos los componentes Text de su aplicación.

Utilice la propiedad Text.defaultProps para establecer la propiedad fontFamily en el nombre de su fuente personalizada.

He aquí un ejemplo:

import React, { useEffect } from 'react';
import { Text } from 'react-native';
import * as Font from 'expo-font';
const App = () => {
  useEffect(() => {
    async function loadFont() {
      await Font.loadAsync({
        'custom-font': require('./assets/fonts/CustomFont.ttf'),
      });
      Text.defaultProps.style.fontFamily = 'custom-font';
    }
    loadFont();
  }, []);
  return (
    <Text>Hello, world!</Text>
  );
};
export default App;

Configurar la familia de fuentes predeterminada usando Text.defaultProps solo afectará a los componentes de texto que se crean después de establecer el valor predeterminado. Si ya creó componentes de texto antes de configurar la familia de fuentes predeterminada, deberá configurar la propiedad fontFamily en esos componentes individualmente.

Crear una familia de fuentes personalizada con múltiples estilos de fuente

Para crear una familia de fuentes personalizada con múltiples estilos de fuente en una aplicación generada por React Native CLI, primero deberá importar los archivos de fuentes a su proyecto. Luego cree un objeto de familia de fuentes personalizado que asigne pesos y estilos de fuentes a sus rutas de archivos de fuentes correspondientes.

Por ejemplo:

import { Text } from 'react-native';
import CustomFonts from '../config/Fonts';
const App = () => {
  const CustomFonts = {
    'CustomFont-Regular': require('../fonts/CustomFont-Regular.ttf'),
    'CustomFont-Bold': require('../fonts/CustomFont-Bold.ttf'),
    'CustomFont-Italic': require('../fonts/CustomFont-Italic.ttf'),
  };
  async componentDidMount() {
    await Font.loadAsync(CustomFonts);
  }
 return(
    <Text style={styles.text}>
      Hello, world!
    </Text>
  );
};
const styles = StyleSheet.create({
  text: {
    fontFamily: 'CustomFont-Regular',
    fontStyle: 'italic',
    fontWeight: 'bold',
    fontSize: 20,
  },
});
export default App;

Tenga en cuenta que las rutas y los nombres de los archivos de fuentes en este ejemplo son solo marcadores de posición y deberá reemplazarlos con las rutas y los nombres de los archivos de fuentes reales. Además, debe asegurarse de que sus archivos de fuentes personalizados se importen correctamente a su proyecto y que sus rutas coincidan con las definidas en su objeto de familia de fuentes.

Reflexiones finales sobre fuentes personalizadas en React Native

Las fuentes personalizadas pueden agregar un toque único y personalizado a su aplicación React Native. En este artículo, analizamos cómo usar fuentes personalizadas en React Native, incluida la importación de archivos de fuentes, la configuración de una fuente personalizada como fuente predeterminada para toda la aplicación, la creación de una familia de fuentes personalizadas con múltiples estilos de fuentes y la carga de fuentes personalizadas sin usar. Expo.

Siempre verifique las restricciones de licencia de cualquier fuente que use y asegúrese de tener permiso para usarla en su aplicación. También es importante tener en cuenta que cargar varias fuentes personalizadas puede aumentar el tamaño de tu aplicación, por lo que solo debes incluir las fuentes que realmente necesitas.

Artículos relacionados: