Decidir el comportamiento de una fuente web mientras se carga puede ser una técnica importante para ajustar el rendimiento. El nuevo descriptor de fuente-display para @font-face permite a los desarrolladores decidir cómo se renderizarán sus fuentes web (o de resguardo), en función del tiempo que tarden en cargarse.
Diferencias en la renderización de fuentes en la actualidad
Las fuentes web ofrecen a los desarrolladores la capacidad de incorporar tipografía enriquecida en sus proyectos con la compensación de que, si el usuario aún no posee un tipo de letra, el navegador deberá pasar un tiempo descárgalo. Debido a que las redes pueden ser inestables, este tiempo de descarga puede afectar negativamente la experiencia del usuario. Después de todo, a nadie le importará lo atractivo que sea tu texto si lleva una cantidad excesiva de tiempo en mostrarse.
Para mitigar parte del riesgo de una descarga de fuentes lenta, la mayoría de los navegadores implementan un tiempo de espera, después del cual se usará una fuente de resguardo. Esta es una técnica útil, pero, desafortunadamente, los navegadores difieren en la implementación.
| Navegador | Tiempo de espera | Resguardo | Cambiar |
|---|---|---|---|
| Chrome 35 y versiones posteriores | 3 segundos | Sí | Sí |
| Ópera | 3 segundos | Sí | Sí |
| Firefox | 3 segundos | Sí | Sí |
| Internet Explorer | 0 segundos | Sí | Sí |
| Safari | Sin tiempo de espera | No disponible | No disponible |
- Chrome y Firefox tienen un tiempo de espera de tres segundos después del cual el texto se muestra con la fuente de resguardo. Si la fuente logra descargarse, finalmente se produce un intercambio y el texto se vuelve a renderizar con la fuente prevista.
- Internet Explorer tiene un tiempo de espera de cero segundos, lo que da como resultado la renderización inmediata del texto. Si la fuente solicitada aún no está disponible, se usa una fuente de resguardo y el texto se vuelve a renderizar una vez que la fuente solicitada está disponible.
- Safari no tiene un comportamiento de tiempo de espera (o al menos nada más allá del tiempo de espera de la red de referencia).
Para empeorar la situación, los desarrolladores tienen un control limitado para decidir cómo afectarán estas reglas a su aplicación. Es posible que un desarrollador centrado en el rendimiento prefiera tener una experiencia inicial más rápida con una fuente de resguardo y solo aprovechar la fuente web más atractiva en visitas posteriores después de que haya tenido la oportunidad de descargar. Con herramientas como la API de Font Loading, es posible anular algunos de los comportamientos predeterminados del navegador y mejorar el rendimiento, pero esto tiene el costo de tener que escribir cantidades importantes de JavaScript, que luego se deben intercalar en la página o solicitarse desde un archivo externo, lo que genera latencia de HTTP adicional.
Para solucionar esta situación, el grupo de trabajo de CSS propuso un nuevo descriptor @font-face, font-display, y una propiedad correspondiente para controlar cómo se renderiza una fuente descargable antes de que se cargue por completo.
Cronogramas de descarga de fuentes
De manera similar a los comportamientos de tiempo de espera de las fuentes existentes que algunos navegadores implementan hoy en día, font-display segmenta la vida útil de una descarga de fuente en tres períodos principales.
- El primer período corresponde al período de bloqueo de fuentes. Durante este período, si el tipo de fuente no se carga, cualquier elemento que intente usarla debe renderizarse con un tipo de fuente de resguardo invisible. Si el tipo de fuente se carga correctamente durante el período de bloqueo, se utiliza normalmente.
- El período de intercambio de fuentes se produce inmediatamente después del período de bloqueo. Durante este período, si el tipo de fuente no se carga, cualquier elemento que intente usarla debe renderizarse con un tipo de fuente de resguardo. Si el tipo de fuente se carga correctamente durante el período de intercambio, se utiliza con normalidad.
- El período de error de fuente ocurre inmediatamente después del período de intercambio de fuentes. Si el tipo de fuente aún no se cargó cuando comienza este período, se marca como una carga con errores, lo que provoca un resguardo de fuente normal. De lo contrario, el tipo de fuente se utiliza normalmente.
Si comprendes estos períodos, podrás usar font-display para decidir cómo debe renderizarse la fuente en función de si se descargó o cuándo se descargó.
¿Qué tipo de visualización de fuente es la adecuada para ti?
Para trabajar con el descriptor font-display, agrégalo a tus reglas at-@font-face de la siguiente manera:
@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');
}
Actualmente, font-display admite el siguiente rango de valores auto | block | swap | fallback | optional.
automático
auto utiliza la estrategia de visualización de fuentes que utiliza el usuario-agente. En la actualidad, la mayoría de los navegadores tienen una estrategia predeterminada similar a block.
bloque
block le da al tipo de fuente un período de bloqueo corto (se recomiendan 3 s en la mayoría de los casos) y un período de intercambio infinito. En otras palabras, el navegador dibuja texto "invisible" en un principio si la fuente no se carga, pero intercambia el tipo de fuente en cuanto se carga. Para ello, el navegador crea un tipo de fuente anónima con métricas similares a la fuente seleccionada, pero con todos los glifos sin "tinta". Este valor solo debe usarse si se requiere renderizar texto en un tipo de letra específico para que la página pueda usarse.
Cambio
swap le da al tipo de fuente un período de bloqueo de cero segundos y un período de intercambio infinito. De esta manera, el navegador obtiene texto de inmediato con un resguardo si el tipo de fuente no se carga, pero lo intercambia en cuanto se carga. Al igual que con block, este valor solo se debe usar cuando renderizar texto en una fuente determinada es importante para la página; sin embargo, renderizar en cualquier fuente seguirá mostrando el mensaje correcto. El texto del logotipo es un buen candidato para el cambio, ya que mostrar el nombre de una empresa con un resguardo razonable servirá para transmitir el mensaje, pero finalmente usarás el tipo de letra oficial.
resguardo
fallback le otorga al tipo de fuente un período de bloqueo extremadamente breve (se recomiendan 100 ms o menos en la mayoría de los casos) y un breve período de intercambio (se recomiendan tres segundos en la mayoría de los casos). En otras palabras, el tipo de fuente se renderiza con un resguardo al principio si no está cargado, pero la fuente se intercambia en cuanto se carga. Sin embargo, si transcurre demasiado tiempo, se usará el resguardo durante el resto de la vida útil de la página. El resguardo es un buen candidato para elementos como el texto del cuerpo en los que te gustaría que el usuario comience a leer lo antes posible y no quieras interrumpir su experiencia cambiando el texto a medida que se cargue una fuente nueva.
opcional
La opción opcional le da al tipo de fuente un período de bloqueo extremadamente breve (se recomiendan 100 ms o menos en la mayoría de los casos) y un período de intercambio de cero segundos. Al igual que el resguardo, esta es una buena opción cuando la fuente de descarga es más atractiva, pero no es fundamental para la experiencia. El valor opcional deja que el navegador decida si iniciar la descarga de la fuente. Puede decidir no hacerlo o puede hacerlo con una prioridad baja, según lo que considere que es mejor para el usuario. Esto puede ser beneficioso en situaciones en las que el usuario tiene una conexión débil y extraer una fuente quizás no constituya el mejor uso de los recursos.
Navegadores compatibles
Actualmente, font-display se encuentra detrás de la marca de funciones de la plataforma web experimental en Chrome 49 para computadoras de escritorio y se lanzará en Opera y Opera para Android.
Demostración
Revisa la muestra para probar font-display. Para los desarrolladores centrados en el rendimiento, puede ser una herramienta más útil a su alcance.