Cómo controlar la forma en la que se cargan las fuentes web

Si tu sitio o aplicación web utiliza fuentes web, controlar cómo se cargan puede ser muy importante para mejorar el rendimiento percibido por tus usuarios. La nueva propiedad font-display disponible para @font-face permite a los diseñadores controlar cómo se muestra el sitio web en función de cuánto tardan en descargarse las fuentes web.

Cómo se cargan las fuentes web en cada navegador

Las fuentes web permiten diseñar sitios web con tipografías avanzadas que no están instaladas en los dispositivos de los usuarios. Su principal inconveniente es que el navegador tiene que descargarse esas tipografías antes de mostrarlas.

Como la velocidad de descarga de la conexión a Internet no es constante, en ocasiones la descarga de las fuentes web puede afectar muy negativamente al rendimiento que perciben los usuarios. No importa lo bonito que hayas diseñado tu sitio si tarda en cargar diez veces más que otros sitios similares.

Para mitigar los riesgos de usar fuentes web, la mayoría de navegadores siguen esta estrategia: se espera un tiempo breve para descargar las fuentes y después de ese tiempo, si la fuente web no está disponible se usa otra fuente alternativa. El problema es que existen pequeñas variaciones en este comportamiento según el navegador.

Estas son las principales diferencias:

• Chrome y Firefox esperan 3 segundos y después muestran la fuente por defecto. Internet Explorer no espera a descargar las fuentes y usa las de por defecto inmediatamente.
• Si después de esos 3 segundos (o 0 segundos en Internet Explorer) la fuente web se descarga, entonces se reemplaza la fuente por defecto (el usuario percibe un parpadeo al cambiar la fuente y algunos elementos de la página se pueden mover ligeramente).
• Safari tiene el comportamiento menos estándar de todos los navegadores, ya que no define ningún tiempo de espera para descargar las fuentes web.

Lo peor de todo es que no se puede cambiar este comportamiento para ajustarlo a tus necesidades. Quizás lo que más te importa es el rendimiento y por eso prefieres utilizar la fuente por defecto en la primera petición y usar la fuente web en el resto de peticiones una vez que se haya descargado. Aunque existen alternativas basadas en JavaScript, como Font Loading API, para controlar la carga de las fuentes web, requiere escribir cierta cantidad de código, que a su vez ralentiza y hace más pesado a tu sitio web.

Para solucionar todos estos problemas, el grupo de trabajo de CSS ha propuesto un nuevo descriptor para @font-face llamado font-display y su correspondiente propiedad CSS para controlar cómo se muestran las fuentes web antes de que se hayan descargado.

Los períodos de descarga de las fuentes web

La propiedad font-display divide el tiempo de carga de las fuentes web en tres periodos:

• Período "block", durante este período, si la fuente web no está disponible, los elementos que quieran usarla tiene que usar en su lugar una fuente invisible (por eso el usuario no ve ningún texto). Si la fuente web logra cargarse durante este período, se utiliza normalmente.
• Período "swap", durante este período, si la fuente web no está disponible, cualquier elemento que quiera usarla debe usar en su lugar la fuente por defecto. Si la fuente web logra cargarse durante este período, se utiliza normalmente.
• Período "failure", si la fuente web no está disponible al comenzar este período, la fuente se marca como "errónea" y se utiliza en su lugar la fuente por defecto. Si la fuente web está disponible al comenzar este período, se utiliza normalmente.

Resulta imprescindible conocer bien estos períodos para utilizar la propiedad font-display y decidir cómo mostrar las fuentes web en función de si se han descargado o no.

Las opciones de la propiedad font-display

La propiedad font-display es en realidad un descriptor de @font-face, por lo que debes definirlo en el interior de la declaración @font-face que quieras modificar. Ejemplo:

@font-face {
  font-family: 'Arvo';
  font-display: auto;
  src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

Los valores permitidos para la propiedad font-display son auto, block, swap, fallback y optional.

Estrategia auto

Indica que debe utilizarse la estrategia por defecto del navegador. La mayoría de navegadores utilizan hoy en día una estrategia similar a block.

Estrategia block

Esta estrategia incluye un período "block" corto (la recomendación son 3 segundos) y un período "swap" infinito. En otras palabras, el navegador muestra texto invisible hasta 3 segundos y cambia a la fuente web en cuanto está disponible, por lo que se produce un parpadeo visible.

Esta estrategia se recomienda solamente cuando el sitio o aplicación web necesita las fuentes web para poder usarse bien.

Estrategia swap

Esta estrategia incluye un período "block" de cero segundos y un período "swap" infinito. En otras palabras, el texto se ve nada más cargar la página (no hay texto invisible) pero se cambia a la fuente web en cuanto está disponible, por lo que también se produce un parpadeo visible.

Esta estrategia se recomienda cuando los contenidos son más importantes que su diseño. Incluso puedes utilizarla en elementos como el logotipo textual del sitio: es mejor que el logotipo está disponible inmediatamente aunque su diseño no sea perfecto y para verlo bien haya que esperar a que se cargue la fuente web.

Estrategia fallback

Esta estrategia incluye un período "block" muy corto (se recomiendan 100 milisegundos o menos) y un período "swap" corto (se recomiendan 3 segundos). En otras palabras, si la fuente web no se carga rápido, se utiliza la fuente por defecto. Después se espera un tiempo corto a cargar la fuente web y si no se carga, se sigue utilizando la fuente por defecto hasta que se cambie de página.

Esta estrategia se recomienda para elementos como el texto principal de la página. Así consigues que el usuario empiece a leer inmediatamente, pero no le molestas cambiando la fuente (y por tanto, produciendo un parpadeo visible) cuando ya lleva un rato leyendo.

Estrategia optional

Esta estrategia incluye un período "block" muy corto (se recomiendan 100 milisegundos o menos) y un período "swap" de cero segundos. Similar a la estrategia fallback, se recomienda su uso cuando mostrar la fuente web no es algo crítico para la experiencia de usuario.

Cuando se usa esta estrategia, es el navegador el que decide si debe descargar la fuente web o no para las siguientes peticiones. Por ejemplo, si navegas con un dispositivo móvil y tu conexión es mala, el navegador no descargará las fuentes.

Resumen de estrategias

La siguiente tabla resume las características de cada estrategia:

Soporte en los navegadores

Actualmente esta opción está disponible en el navegador Opera y experimentalmente en el navegador Google Chrome 49.

Sobre el autor

Este artículo fue publicado originalmente por Rob Dodson y ha sido traducido con permiso por Javier Eguiluz.