Usando tipografías personalizadas en React Native

Fernando Larrañaga
Mar 9, 2018 · 5 min read
Image for post
Image for post
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):

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

Image for post
Image for post
Google Fonts

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

Image for post
Image for post
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:

Image for post
Image for post
“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.

Image for post
Image for post
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:

Image for post
Image for post
Las tipografías quedan en el grupo “Resources” en Xcode.
Image for post
Image for post
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:

Image for post
Image for post

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.

Image for post
Image for post

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:

Image for post
Image for post
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.

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:

Image for post
Image for post
Resultado en iOS
Image for post
Image for post
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.

NodersJS

¿Por qué? Porque nos gusta.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store