Web Performance - Cómo optimizar tus tipografías
Tags: css, performance, webdev, spanish
Published: 2020-11-20 10:47:44

¿Por qué vamos a hablar de fuentes? Las fuentes y tipografías están en la web desde sus inicios, porque para esto fue creada, para compartir documentos.

Con el paso del tiempo se fueron agregando elementos de diseño como imágenes, grillas y fuentes personalizadas. Hoy en día no existe sitio web que no contenga texto, y en la gran mayoría estos se renderizan con fuentes personalizadas.

Entonces podemos afirmar con bastante seguridad que las fuentes son un recurso importante y debemos prestarle atención.

Pero, ¿cómo podemos hacer para mejorar la performance sobre este tema? Veamos algunos puntos a trabajar.

## **Self-hosted**

Las fuentes deben ser self-hosted. Es decir, las fuentes deben ser parte de nuestro proyecto y debemos tratar de evitar a toda costa cargar fuentes de CND externas como por ejemplo de Google Fonts.

¿Por qué? Porque traer recursos desde orígenes externos genera nuevas conexiones HTTP y varios viajes de ida y vuelta a ese origen.

¿Viajes de ida y vuelta? What? 🤔 Te recomiendo [este artículo](https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work) si no sabes de que estoy hablando.

## **Subsetting & convert format**

Los archivos de fuentes suelen ser super pesados. Cuando se descargan de Google Fonts generalmente una sola variante tipográfica pesa aproximadamente 250kb. Si necesitamos 4 variantes como regular, light, regular italic y bold por ejemplo, nuestro usuario debe descargar 1mb solo para leer el contenido. 😱

Entonces, lo primero que podemos hacer es un subsetting de las fuentes, es decir, eliminar todos lo glifos o caracteres que nada tienen que ver con el idioma del sitio que estemos construyendo. EJ: generalmente todo lo que no sea latín.

![Captura de Pantalla 2020-11-19 a la(s) 07.22.43](https://dev-to-uploads.s3.amazonaws.com/i/pkv4br1dg7j9v7zf8iv0.png)
<small>_Ejemplo de la fuente Roboto_</small>

En [este link](https://everythingfonts.com/subsetter) te dejo una herramienta en linea para esto.

Una vez que _limpiamos_ nuestras fuentes, podemos convertirla a formatos que estén optimizados para web, como WOFF y WOFF2. 

Siempre debemos evitar el uso de fuentes TTF y EOT porque son archivos que por defecto no están comprimidos. El uso de este tipo de fuentes debe ser solo como fallback para dar soporte a navegadores antiguos.

Acá dejo otra [herramienta](https://everythingfonts.com/ttf-to-woff2) en línea para esto.

Luego de aplicar un subsetting y convertidas a un formato optimizado para web, un archivo va a estar pesando entre 15kb y 20kb, una reducción impresionante. 😎

## **Preload**

Bien, pasamos de tener un archivo de 250kb a un archivo que no supera los 20kb. OK, pero esos 20kb de todavía nuestro usuario tiene que descargarlos.

Para que esta descarga suceda lo antes posible, podemos hacer  un preload a nuestro archivo de fuente para indicarle al navegador que se trata de un recurso prioritario y que empiece a cargarlo cuanto antes.

Ejemplo:
```html
<link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
```

## **font-display**

Ya tenemos nuestras fuentes optimizadas e hicimos un preload de las mismas para que estén disponible lo antes posible.

Pero puede pasar que el contenido se pinte y por algún motivo la fuente todavía no se cargó. Entonces ¿el usuario no va a poder leer el contenido de nuestro sitio hasta que la fuente se cargue?. Y, ¿si la fuente se demora? o ¿nunca se carga?

Veamos un poco cómo funcionan los distintos navegadores en cuanto a la estrategia de renderizado de fuentes.

Safari oculta el texto hasta que la fuente se haya descargado. Chrome y Firefox ocultan el texto por 3 segundos, si en ese tiempo la fuente no se cargó, renderizan el texto con la fuente del sistema hasta que la fuente personalizada esté cargada.

En cualquiera de estos casos el usuario va a ver la pantalla en blanco por un tiempo.

¿Cómo podemos resolver este problema? ¡CSS al rescate! 🦸

La propiedad `font-face` sirve para indicarle al navegador qué estrategia seguir en cuanto a al renderizado de fuentes.

Los valores que acepta esta propiedad son auto, block, swap, fallback, optional. Pero el valor que nos interesa es `swap`, porque le indica al navegador que muestre el texto de manera inmediata con las fuentes del sistema, y cuando la fuente personaliza esté lista para usarse, haga el reemplazo.

Ejemplo:
```css
@font-face {
  font-family: 'Roboto Mono';
  src: url('/fonts/RobotoMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
```

De esta manera nuestro usuario va a poder leer el contenido de nuestro sitio de manera inmediata, sin tener que esperar.

## **Variable fonts**

Y cuando creías que ya no podías optimizar más, aparecen las _variable fonts_ o fuentes variables.

Pero antes de definir que son las variable fonts, debemos entender la diferencia entre estilo tipográfico y familia tipográfica.

Un **estilo tipográfico** es un tipo de letra **único y específico**, como puede ser regular, o _regular italic_, o ***bold italic***.

Una **familia tipográfica** es el conjunto de estilos.

![roboto-family-specimen](https://dev-to-uploads.s3.amazonaws.com/i/tzg39f8qtctnwz7vpupv.png)
 
Ahora que ya tenemos claro está diferencia, podemos definir a las variable fonts como un solo archivo que contiene todos los estilos. Es decir, podemos tener la familia entera, dentro de un solo archivo.

![Grabación de pantalla 2020-11-20 a la(s) 09.09.33](https://dev-to-uploads.s3.amazonaws.com/i/ua7o1jyvi8krzi3p5y57.gif) 

Eso es todo por ahora, voy a estar subiendo más artículos de web performance ⚡️

Nos vemos pronto 👋🏻