Usando tipografías personalizadas en React Native

Welcome indeed

Usar tipografías personalizadas en una app móvil puede ayudar a crear una mejor experiencia para los usuarios. Con React Native esto afortunadamente termina siendo un proceso bastante rápido de implementar, pero que tiene algunos detalles que pueden terminar complicándonos de manera extra y que es bueno tener en cuenta.

Veamos ahora la forma de hacerlo, tanto para iOS como Android.

Creando el proyecto y agregando las tipografías

Lo primero que haremos será crear un nuevo proyecto en React Native (o usar el que tenemos actualmente):

react-native init NodersExampleApp

En caso de no tener listas las tipografías que queremos usar, podemos buscarlas en algún sitio como Google Fonts

Google Fonts

y las guardamos en alguna ubicación dentro del proyecto:

La ruta es opcional, puede ser cualquiera

Linkeando nativamente a iOS y Android

Afortunadamente, el proceso de enlazar de forma nativa las tipografías en iOS y Android es ahora bastante sencillo, ya que podemos usar “react-native link” para hacerlo de forma automática, tal como si se tratara de algún paquete con funcionalidades nativas que quisiéramos usar en una aplicación.

No obstante, a diferencia de los paquetes, react-native link no busca las tipografías (u otros assets) de forma automática, así que hay un pequeño ajuste que debemos hacer, agregando una sección extra en el archivo package.json del proyecto:

“assets” es un array que permite múltiples rutas que react-native link usará

Acá agregaremos una nueva sección llamada “rnpm”, en la cual indicaremos la ruta donde tenemos las tipografías. Al correr react-native link, va a revisar si hay rutas incluidas en esta sección e intentará enlazar nativamente el contenido si es que es válido.

Output de react-native link

Ahora, si revisamos dentro de los directorios de las apps nativas, tanto en iOS como en Android, deberíamos ver las tipografías incluidas:

Las tipografías quedan en el grupo “Resources” en Xcode.

Y para android quedan en ./android/app/src/main/assets/fonts/

Usando las tipografías en los estilos de la app

Empezar a usar las tipografías dentro de la app es bastante sencillo, pero con algunas consideraciones.

Para esto, solo hay que hacer un cambio en cualquiera de los estilos que tengamos declarados para algún componente de texto, e incluir la propiedad font-family:

font-family: 'Lobster'

El detalle a tener en cuenta acá es que debemos indicar el nombre correcto de la tipografía para que se vea reflejado, y contrario a lo que inicialmente podríamos pensar, el nombre que debemos usar puede no ser exactamente el mismo que aparece en el nombre del archivo o en la descripción de la tipografía. Adicionalmente este nombre, la mayoría de las veces, es distinto en iOS y Android.

Para obtener el nombre correcto que debemos usar, hay un par de formas:

Mediante Font Book (macOS/ OS X)

Si usas macOS/OS X, la forma más sencilla de obtener el nombre de la tipografía es usando Font Book, una app que viene incluida por defecto.

Ahí buscamos la tipografía que vamos a incluir, y en la opción de información, deberíamos ver el nombre que necesitamos usar:

Dependiendo la tipografía y si es iOS o Android, podría ser cualquiera de los primeros 3 valores.

Mediante código en Xcode

La otra opción es agregar este código dentro de la app, y ver el output vía Xcode, el cual listará todas las tipografías que tenemos disponibles para usar, con los nombres correctos que debemos incluir.

NSArray *fontFamilies = [UIFont familyNames];

for (int i = 0; i < [fontFamilies count]; i++)
{
    NSString *fontFamily = [fontFamilies objectAtIndex:i];
    NSArray *fontNames = [UIFont fontNamesForFamilyName:[fontFamilies objectAtIndex:i]];
    NSLog (@"%@: %@", fontFamily, fontNames);
}

Para Android:

En la mayoría de los casos, bastará solamente con usar el nombre del archivo (sin la extensión).

Finalmente, con esto deberíamos ver la nueva tipografía en la app:

Resultado en iOS

Resultado en Android

Formatos soportados

Hasta ahora, estos son los formatos soportados por iOS y Android:

• iOS: TTF, OTF, WOFF (iOS 10+), WOFF2 (iOS 10+).
• Android: TTF, OTF, TTC.

Tips

Estos son algunos tips extra a tener en consideración, relacionados a algunos problemas que a veces ocurren y así poder evitar algún rato extra de debugging (como nos pasó a nosotros 😞)

• Como mencionábamos para Android, la mayoría de las veces, basta con hacer coincidir el nombre del archivo de la tipografía con el nombre que usamos para font-family. Éste, es muy probable que sea distinto al que debemos usar para iOS, por lo que será necesario o cambiar el nombre del archivo para hacerlo coincidir, o hacer uso del módulo Platform de React Native para distinguir entre iOS y Android, y así asignar el nombre correcto (en el código fuente del ejemplo lo hicimos así).
• En algunos casos, si el estilo del texto tiene alguna propiedad extra que modifique la fuente (como por ejemplo font-weight: bold), la tipografía no se mostrará y mostrará la que tiene el teléfono por defecto. Para estos casos hay que usar la que corresponde a ese tipo de modificación. (Por ejemplo, Open Sans Italic para cursiva). En caso de que no veamos la fuente aplicada en el emulador, este es un buen punto a revisar.

Código Fuente

El código fuente de este ejemplo pueden encontrarlo acá: https://github.com/Xabadu/CustomFontReactNativeExample

Noders es la comunidad más electrizante de Node.js y JavaScript de Latinoamérica. Generamos iniciativas de aprendizaje e integración de comunidades de desarrollo en diferentes países y a lo largo y ancho de esta cosita llamada la Internet.

Si quieres saber más de nosotros y/o participar de lo que hacemos, únete a nuestro Slack.

Gracias a Cesar Encina Leon, Cristofer, Tatiana Molina y Felipe Andrés Torres Sepu por las revisiones y correcciones de este artículo.