Cómo controlar el rendimiento de la fuente con font-display

Rob Dodson

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 lenta de la fuente, 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.

• Chrome y Firefox tienen un tiempo de espera de tres segundos; transcurrido ese tiempo, el texto se muestra con la fuente de reserva. Si la fuente logra descargarse, finalmente se produce un intercambio y el texto se vuelve a representar con la fuente esperada.
• Internet Explorer tiene un tiempo de espera de cero segundos, que se traduce en la representación inmediata del texto. Si la fuente solicitada aún no está disponible, se usa una de reserva y el texto se vuelve a representar una vez que la fuente solicitada está disponible.
• Safari no cuenta con un comportamiento de tiempo de espera (o al menos no otro que el tiempo de espera inicial de la red).

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 reserva 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 el modo en que se renderiza una fuente descargable antes de que se cargue por completo.

Cronogramas de descarga de fuentes

De manera similar al comportamiento 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.

1. El primer período es el período de bloqueo de fuente. En él, si el tipo de fuente no se carga, cualquier elemento que intente usarla debe representarse con un tipo de fuente de reserva invisible. Si el tipo de fuente se carga correctamente durante el período de bloqueo, entonces se utiliza de manera normal.
2. El período de intercambio de fuente ocurre 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 representarse con un tipo de fuente de reserva. Si el tipo de fuente se carga correctamente durante el período de intercambio, entonces se utiliza de manera normal.
3. El período de error de fuente ocurre inmediatamente después del período de intercambio de fuente. Si el tipo de fuente aún no se cargó cuando comienza este período, se lo marca como una carga fallida y se utiliza la fuente de reserva. De lo contrario, el tipo de fuente se usa de forma normal.

Comprender estos períodos significa que puedes usar font-display para decidir de qué modo debe renderizarse la fuente según si se descargó o cuándo se descargó.

¿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 la estrategia de visualización de fuente que usa el usuario-agente. Actualmente, la mayoría de los navegadores tienen una estrategia predeterminada similar a bloquear.

bloquear

block le asigna al tipo de fuente un breve período de bloqueo (se recomiendan 3 segundos en la mayoría de los casos) y un período de intercambio infinito. En otras palabras, el navegador extrae texto “invisible” en primer lugar si no se carga la fuente, 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 todos los glifos carecen de “tinta”. Este valor solo debe usarse si se requiere la representación de texto en un tipo de letra específico para que la página pueda usarse.

Cambio

swap le asigna al tipo de fuente un período de bloqueo de cero segundos y un período de intercambio infinito. Esto significa que el navegador extrae texto de inmediato con una reserva si el tipo de fuente no se carga, pero intercambia el tipo de fuente en cuanto se carga. De manera similar a block, este valor solo debe usarse cuando la renderización de texto en una fuente en particular es importante para la página, aunque representar en cualquier fuente de todos modos serviría para transmitir el mensaje. El texto del logotipo es un buen candidato para el intercambio, ya que mostrar el nombre de una empresa con una reserva razonable servirá para transmitir el mensaje, pero, en última instancia, se usará el tipo de letra oficial.

resguardo

fallback le asigna 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 breve (se recomiendan tres segundos en la mayoría de los casos). En otras palabras, el tipo de fuente se representa con una reserva en primer lugar si no está cargado, pero la fuente se intercambia en cuanto se carga. Sin embargo, si transcurre demasiado tiempo, se usa la reserva para el resto de la vida útil de la página. El reemplazo 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 perturbar su experiencia cambiando el texto a medida que se carga una fuente nueva.

opcional

opcional le asigna 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. De manera similar a fallback, esta es una buena opción cuando la fuente que se está descargando es “atractiva”, pero no es fundamental para la experiencia. El valor opcional le permite al navegador decidir si inicia la descarga de la fuente, lo que puede elegir no hacer o hacerlo con una prioridad baja, según lo que considere mejor para el usuario. Esto puede resultar de utilidad en los casos donde el usuario tiene una conexión débil y obtener una fuente quizás no constituya 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 caja de herramientas.