Cómo cargar fuentes web para evitar problemas de rendimiento y acelerar la carga de la página

Las fuentes web personalizadas se utilizan en todo el mundo, pero muchos (¡oh, tantos) sitios las cargan incorrectamente! Esto causa muchos problemas para la carga de la página, como problemas de rendimiento, tiempo de carga lento, renderizado bloqueado y fuentes intercambiadas durante la navegación.

Veo que muchos desarrolladores ignoran estos problemas o tal vez cometen los mismos errores una y otra vez solo porque “siempre lo han hecho”, pero como desarrolladores web debemos ser capaces de adaptarnos a un entorno en constante cambio.

Es hora de romper este ciclo y comenzar a hacer lo correcto en 2019. Solo hay cuatro pasos a considerar al cargar una fuente web personalizada:

  • Utilice el formato de fuente correcto
  • Precargar fuentes
  • Utilice la declaración de tipografía correcta
  • Evite el texto invisible durante la carga de fuentes.

Analicemos estos puntos uno a la vez.

Utilice el formato de fuente correcto

Hay muchos formatos de fuente que se pueden usar en la web, pero solo se necesitan dos formatos si no tiene que ser compatible con Internet Explorer (IE) 8 o versiones anteriores : woff y woff2 . Estos son los únicos dos tipos de archivos que debe usar porque están comprimidos en el formato gzip de forma predeterminada (por lo que son muy pequeños), están optimizados para la web y son totalmente compatibles con IE 9+ y todos los demás navegadores perennes.

Precargar fuentes

Cuando use fuentes personalizadas, debe decirle al navegador que las precargue usando la rel=""etiqueta y los atributos apropiados :

Tenga en cuenta que el uso de crossorigin aquí es important; sin este atributo, el navegador ignora la fuente precargada y se realiza una nueva búsqueda. Esto se debe a que se espera que el navegador obtenga las fuentes de forma anónima, y ​​la solicitud de precarga solo se hace anónima mediante el uso del atributo this.

En el ejemplo anterior, los rel="preload" as="font"atributos le pedirán al navegador que comience a descargar el recurso requerido lo antes posible. También le dicen al navegador que se trata de una fuente, para que pueda priorizarla adecuadamente en su cola de recursos. El uso de sugerencias de precarga tendrá un impacto dramático en el rendimiento de la fuente web y la carga inicial de la página. Los navegadores que admiten la precarga y las sugerencias de captación previa comenzarán a descargar fuentes web tan pronto como hayan visto la sugerencia en el archivo HTML y ya no tendrán que esperar por el CSS.

En su lugar, puede usar el rel="prefetch"atributo para decirle al navegador que prepare la descarga de los recursos que pueden ser necesarios más adelante durante la carga de la página o las acciones del usuario para que asigne una prioridad baja a esos recursos.

PRECAUCIÓN:

Si está utilizando un CDN como Google Fonts, asegúrese de que los archivos de fuentes que está cargando previamente coincidan con los del CSS. Las fuentes también se pueden actualizar regularmente, y si está precargando una versión anterior mientras usa el CSS para una más nueva, puede terminar descargando dos versiones de la misma fuente y desperdiciando el ancho de banda de sus usuarios. Considere usar ??‍? instead for easier maintenance.

Correct font-face declaration

Declaring a font-face family is very simple but we must take care with certain things when we do it. Here a correct example declaring a custom font family:

@font-face { font-family: 'Custom Font'; font-weight: 400; font-style: normal; font-display: swap; /* Read next point */ unicode-range: U+000-5FF; /* Download only latin glyphs */ src: local('Custom Font'), url('/fonts/custom-font.woff2') format('woff2'), url('/fonts/custom-font.woff') format('woff');}

Here’s the Unicode range from Google Web Fundamentals.

As you can see we use only optimised fonts (woff and woff2) and we tell the browser to load only the required glyphs range (from U+000 to U+5FF), but this property doesn’t prevent browsers to download the entire font. There are also two more things to note, the local() function and the font declaration order.

The local() function allows users to use their local copy of the font if present (e.g. think about the Roboto fonts that are pre-installed on Android) instead of downloading it.

The font declaration order is also important because the browser will start fetching the resources by following the declaration order. If it supports the woff2 format it will download the font, or if it doesn’t recognise the resource format it will proceed to the next one, and so on.

If you really want to use eot and ttf fonts make sure to add them at the end of the src declaration.

Resources

  • Glyphs range generator by Eli Fitch
  • Modern Font Face generator

Avoid invisible text during font loading

Fonts are often large files that take a while to load even when gzipped. To deal with this, some browsers hide text until the font loads (the “flash of invisible text”). You can avoid the “flash” and show content to users immediately using a system font initially, then replacing it.

In the previous @font-face example you’ll notice the font-displaydeclaration. The swap value tells the browser that text using this font should be displayed immediately using a system font. Once the custom font is ready, the system font is swapped out.

If a browser does not support font-display it continues to follow its default behaviour for loading fonts.

Browser default behaviours if a font is not ready:

Edge uses a system font until the custom font is ready, then swaps out fonts.

Chrome will hide text for up to 3 seconds. If text is still not ready, it will use a system font until the custom font is ready.

Firefox will hide text for up to 3 seconds. If text is still not ready, it will use a system font until the custom font is ready.

Safari hides text until the custom font is ready.

Testing

The following links test the “standard version” against the optimised one:

  • Standard
  • Optimised

Results

Conclusion

Considering such basic optimisations will improve the general UX of your digital product. We must account for situations where the connection speed is not optimal or when people don’t have time to wait several seconds while your app/site is being completely loaded and navigable.

Such improvements, especially for large projects, are mandatory for improving overall user experience, and they really don’t require a lot of effort.

We must work together in trying to fix the web.

Follow my blog at:

Mattia Astorino

Web Developer, CSS/HTML ninja in Monza. Member of Open Source Design.equinsuocha.io