Decidir el comportamiento de una fuente web mientras se carga puede ser una técnica importante de ajuste de rendimiento. El nuevo descriptor font-display para @font-face permite que los desarrolladores decidan cómo se renderizarán (o se usarán como resguardo) sus fuentes web, según el tiempo que tarden en cargarse.
Diferencias en la renderización de fuentes en la actualidad
Las fuentes web les permiten a los desarrolladores incorporar una tipografía enriquecida en sus proyectos con la desventaja de que, si el usuario aún no tiene un tipo de letra, el navegador debe dedicar tiempo a descargarlo. 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 tarda demasiado en mostrarse.
Para mitigar parte del riesgo de una descarga de fuente 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, lamentablemente, los navegadores difieren en la implementación real.
| Navegador | Tiempo de espera | Resguardo | Cambiar |
|---|---|---|---|
| Chrome 35 y versiones posteriores | 3 segundos | Sí | Sí |
| Opera | 3 segundos | Sí | Sí |
| Firefox | 3 segundos | Sí | Sí |
| Internet Explorer | 0 segundos | Sí | Sí |
| Safari | Sin tiempo de espera | N/A | N/A |
- 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 se descarga, se produce un intercambio y el texto se vuelve a renderizar con la fuente deseada.
- Internet Explorer tiene un tiempo de espera de cero segundos, lo que genera una renderización de texto inmediata. Si la fuente solicitada aún no está disponible, se usa un resguardo y el texto se vuelve a renderizar más adelante, una vez que la fuente solicitada esté disponible.
- Safari no tiene un comportamiento de tiempo de espera (o al menos nada más allá de un tiempo de espera de red de referencia).
Para empeorar las cosas, los desarrolladores tienen un control limitado para decidir cómo estas reglas afectarán a su aplicación. Un desarrollador orientado al rendimiento puede preferir tener una experiencia inicial más rápida que use 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 descargarse. Con herramientas como la API de Font Loading, es posible anular algunos de los comportamientos predeterminados del navegador y lograr mejoras de rendimiento, pero esto implica tener que escribir cantidades no triviales de JavaScript que, luego, se deben intercalar en la página o solicitar desde un archivo externo, lo que genera una latencia HTTP adicional.
Para ayudar a 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
Al igual que los comportamientos de tiempo de espera de fuentes existentes que algunos navegadores implementan hoy en día, font-display segmenta la vida útil de la descarga de una fuente en tres períodos principales.
- El primer período es el período del bloque de fuente. Durante este período, si no se carga el tipo de letra, cualquier elemento que intente usarlo debe renderizarse con un tipo de letra de resguardo invisible. Si la fuente se carga correctamente durante el período de bloqueo, se usa de forma normal.
- El período de intercambio de fuentes ocurre inmediatamente después del período de bloqueo de fuentes. Durante este período, si no se carga el tipo de letra, cualquier elemento que intente usarlo debe renderizarse con un tipo de letra de resguardo. Si la fuente se carga correctamente durante el período de intercambio, se usa de forma normal.
- El período de falla de la fuente ocurre inmediatamente después del período de intercambio de fuentes. Si el tipo de letra aún no se carga cuando comienza este período, se marca como una carga fallida, lo que provoca el resguardo de fuente normal. De lo contrario, se usa el tipo de letra de forma normal.
Comprender estos períodos significa que puedes usar font-display para decidir cómo se debe renderizar tu fuente según si se descargó o no, y cuándo.
¿Qué font-display es el adecuado para ti?
Para trabajar con el descriptor font-display, agrégalo a tus reglas de at @font-face:
@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 usa cualquier estrategia de visualización de fuente que use el usuario-agente. Actualmente, la mayoría de los navegadores tienen una estrategia predeterminada similar a bloquear.
bloquear
block le otorga al tipo de letra un período de bloqueo corto (se recomiendan 3 segundos en la mayoría de los casos) y un período de intercambio infinito. En otras palabras, el navegador dibuja texto “invisible” al principio si no se carga la fuente, pero cambia la fuente en cuanto se carga. Para ello, el navegador crea un tipo de letra anónimo con métricas similares a la fuente seleccionada, pero con todos los glifos que no contienen “tinta”. Este valor solo debe usarse si se requiere renderizar texto en un tipo de letra en particular para que la página se pueda usar.
Cambio
swap le otorga al tipo de letra un período de bloqueo de cero segundos y un período de intercambio infinito. Esto significa que el navegador dibuja texto de inmediato con un resguardo si no se carga el tipo de letra, pero lo cambia en cuanto se carga. Al igual que block, este valor solo debe usarse cuando la renderización de texto en una fuente en particular es importante para la página, pero la renderización en cualquier fuente seguirá transmitiendo un mensaje correcto. El texto del logotipo es un buen candidato para el intercambio, ya que mostrar el nombre de una empresa con un resguardo razonable transmitirá el mensaje, pero, en última instancia, usarás el tipo de letra oficial.
resguardo
El reemplazo le otorga al tipo de letra un período de bloqueo extremadamente pequeño (se recomiendan 100 ms o menos en la mayoría de los casos) y un período de intercambio corto (se recomiendan tres segundos en la mayoría de los casos). En otras palabras, el tipo de letra se renderiza con un resguardo al principio si no se carga, pero la fuente se cambia en cuanto se carga. Sin embargo, si transcurre demasiado tiempo, se usará el resguardo para el resto del ciclo de vida de la página. El resguardo es una buena opción para elementos como el texto del cuerpo, en los que deseas que el usuario comience a leer lo antes posible y no quieres alterar su experiencia cambiando el texto mientras se carga una fuente nueva.
opcional
Opcional le otorga al tipo de letra un período de bloqueo extremadamente pequeño (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 reemplazo, esta es una buena opción cuando la fuente que se descarga es más bien un “elemento que sería bueno tener”, pero no es fundamental para la experiencia. El valor opcional le permite al navegador decidir si iniciar la descarga de la fuente, que puede elegir no hacer o hacerlo como una prioridad baja, según lo que considere mejor para el usuario. Esto puede ser beneficioso en situaciones en las que el usuario tiene una conexión débil y descargar una fuente puede no ser el mejor uso de los recursos.
Navegadores compatibles
Actualmente, font-display se encuentra detrás de la marca Experimental Web Platform Features en Chrome 49 para computadoras de escritorio y se envía en Opera y Opera para Android.
Demostración
Consulta el ejemplo para probar font-display. Para los desarrolladores que se preocupan por el rendimiento, puede ser una herramienta más útil en tu cinturón de herramientas.