Dominando la Tipografía en React Native: Grosor de Fuentes y Fuentes Personalizadas

Dominar la tipografía es clave para crear aplicaciones React Native visualmente atractivas y fáciles de usar. Esta guía explora cómo gestionar eficazmente los pesos de las fuentes e incorporar fuentes personalizadas en sus proyectos.

Tabla de Contenido

• Estilo de Peso de Fuente
• Incorporando Fuentes Personalizadas

Estilo de Peso de Fuente

React Native ofrece un control sencillo sobre el peso de la fuente usando la propiedad de estilo fontWeight dentro del componente Text. Esta propiedad acepta valores numéricos (100-900) y palabras clave predefinidas:

• 'normal': Equivalente a 400.
• 'bold': Equivalente a 700.
• '100', '200', '300', '400', '500', '600', '700', '800', '900': Valores de peso específicos.

Aquí hay un ejemplo que demuestra diferentes pesos de fuente:

import React from 'react';
import { Text, StyleSheet } from 'react-native';

const MyComponent = () => {
  return (
    <Text style={styles.text}>
      Este es peso normal (400). <Text style={styles.boldText}>Este es negrita (700). <Text style={styles.lightText}>Este es ligero (300).
    </Text>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
  },
  boldText: {
    fontWeight: 'bold',
  },
  lightText: {
    fontWeight: '300',
  },
});

export default MyComponent;

Recuerde que la representación del peso de la fuente depende de la familia de fuentes elegida. No todas las fuentes admiten la gama completa de pesos. React Native recurrirá al peso disponible más cercano si no se admite un peso específico.

Incorporando Fuentes Personalizadas

Extender las posibilidades de diseño más allá de las fuentes del sistema predeterminadas implica agregar y usar fuentes personalizadas. Esto mejora el atractivo visual y la marca de su aplicación.

1. Agregar Archivos de Fuente: Coloque sus archivos de fuente (por ejemplo, .ttf, .otf) en una carpeta dedicada dentro de los activos de su proyecto (por ejemplo, src/assets/fonts).
2. Registrar Fuentes (Expo): Si usa Expo, aproveche expo-font:

import { useFonts } from 'expo-font';
import MyCustomFont from './assets/fonts/MyCustomFont.ttf';

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

  if (!loaded) return null;

  return (
    <Text style={{ fontFamily: 'MyCustomFont', fontWeight: 'bold' }}>Texto con Fuente Personalizada</Text>
  );
}

3. Registrar Fuentes (No Expo): Para proyectos que no son de Expo, es posible que necesite un enfoque más manual (Este ejemplo usa un marcador de posición para el manejo específico de la plataforma. Ajuste según sus necesidades.):

import React from 'react';
import { Text, StyleSheet, Platform } from 'react-native';
import MyCustomFont from './assets/fonts/MyCustomFont.ttf'; // Ajustar la ruta según sea necesario

const App = () => {
  return (
    <Text style={styles.text}>Esto usa una fuente personalizada.</Text>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 18,
    fontFamily: Platform.OS === 'ios' ? 'MyCustomFont' : 'MyCustomFont', //Manejar diferentes SO aquí.
  },
});

export default App;

4. Usar Fuentes Registradas: Una vez registradas, use el nombre de la familia de fuentes en la propiedad de estilo fontFamily de sus componentes Text. Asegúrese de que el nombre coincida con el nombre del archivo de fuente utilizado durante el registro.

Al combinar el peso de la fuente y las técnicas de fuente personalizada, se logra un control tipográfico preciso en sus aplicaciones React Native, lo que lleva a una mejor consistencia visual y una experiencia de usuario más profesional. Recuerde realizar pruebas exhaustivas entre dispositivos para garantizar una representación consistente.