font-display: los cinco valores y sus periodos exactos

Todo lo que ocurre entre que el navegador pide la fuente y que la tiene está gobernado por un solo descriptor de cinco valores. La documentación popular los describe con adjetivos —bloquea un poco, intercambia rápido— cuando en realidad la especificación define dos periodos con duraciones recomendadas concretas, y los motores las implementan con números que se pueden citar. Conocer esos números es la diferencia entre elegir un valor y copiarlo de un ejemplo.

Los dos periodos

Desde el instante en que se solicita la fuente, su ciclo de vida se divide en tres tramos consecutivos, y el descriptor solo controla la duración de los dos primeros.

El periodo de bloqueo. Si la fuente no ha llegado, el elemento se renderiza con una cara de reserva invisible. Ocupa el espacio que ocuparía la fuente de reserva, pero no se dibuja nada. El texto está ahí, es seleccionable y es accesible, y no se ve. Si la fuente llega dentro de este periodo, se usa con normalidad y el usuario no ha visto nada raro.

El periodo de intercambio. Empieza cuando acaba el de bloqueo. Si la fuente no ha llegado, el texto se pinta con la fuente de reserva, visible. Si la fuente llega durante este periodo, se intercambia en cuanto llega.

El periodo de fallo. Empieza cuando acaba el de intercambio. Si la fuente no ha llegado, el navegador la trata como no disponible y usa la reserva para el resto de la vida de la página, aunque la fuente llegue después. La descarga puede completarse y quedar en caché para la siguiente navegación, pero en esta ya no se usa.

Los dos fenómenos que todo el mundo nombra son consecuencia directa de estos tramos. El destello de texto invisible es un periodo de bloqueo largo: el usuario ve un hueco en blanco donde debería haber texto. El destello de texto sin estilar es un periodo de intercambio activo: el usuario ve el texto con la fuente equivocada y después cambia. El segundo es peor para el CLS y mucho mejor para la percepción de velocidad, y esa es la tensión que resuelve el descriptor.

Los cinco valores

La especificación describe cada valor como un par de periodos, y recomienda duraciones concretas: tres segundos para lo que llama un periodo de bloqueo corto, y cien milisegundos o menos para lo que llama un periodo de bloqueo extremadamente pequeño. Los motores implementan esas recomendaciones.

Cuatro consecuencias que se leen directamente de la tabla y que conviene tener presentes.

auto no es neutro. El valor por defecto, el que tienes si no escribes nada, se comporta como block en los motores actuales: hasta tres segundos de texto invisible. La mayoría de los sitios que sufren texto invisible no eligieron block, simplemente no escribieron el descriptor.

El periodo de bloqueo retrasa el primer pintado con contenido. El texto invisible no cuenta como contenido pintado. Con block, en una conexión donde la fuente tarda 2,5 segundos, el primer pintado con contenido de un bloque de texto se retrasa 2,5 segundos. Si el elemento mayor con contenido de tu página es texto, el retraso se traslada íntegro a esa métrica también.

El periodo de intercambio infinito garantiza que se verá tu fuente, y garantiza el desplazamiento. Con swap, aunque la fuente llegue a los quince segundos, se intercambia. El usuario que ya llevaba diez segundos leyendo ve saltar el texto entero.

El periodo de intercambio de cero segundos elimina el desplazamiento por construcción. Con optional, si la fuente no está lista al terminar los 100 milisegundos de bloqueo, no se usa. Cero intercambio significa cero desplazamiento, sin ajustes ni descriptores de métrica. La descarga sigue adelante y la fuente queda en caché, así que la siguiente navegación del mismo usuario la tendrá lista dentro del periodo de bloqueo y la usará desde el primer pintado.

Todo esto se declara por cara de fuente, no por sitio, lo cual es exactamente lo que hace falta:

@font-face {
  font-family: 'Titulares';
  src: url('/fuentes/titulares.woff2') format('woff2');
  font-weight: 600 800;
  font-display: swap;        /* el titular tiene que verse ya */
}

@font-face {
  font-family: 'Cuerpo';
  src: url('/fuentes/cuerpo.woff2') format('woff2');
  font-weight: 100 900;
  font-display: optional;    /* el cuerpo no puede permitirse desplazar */
}

@font-face {
  font-family: 'Iconos';
  src: url('/fuentes/iconos.woff2') format('woff2');
  font-display: block;       /* un icono con la fuente de reserva es basura visual */
}

El caso de la fuente de iconos merece la explicación, porque es el único donde block es la respuesta correcta. Los glifos de una fuente de iconos viven en puntos de código que la fuente de reserva no tiene, o peor, que tiene asignados a otra cosa. Con swap, durante el periodo de intercambio el usuario ve cuadrados vacíos o letras sueltas donde deberían estar los iconos. Tres segundos de hueco invisible es mejor que tres segundos de basura. Dicho lo cual, la respuesta de verdad correcta es no usar una fuente de iconos: los mismos iconos en SVG en línea no tienen ni cadena de carga ni periodo de nada.

<link rel="preload" as="font" type="font/woff2" href="/fuentes/cuerpo.woff2" crossorigin>

@font-face {
  font-family: 'Cuerpo';
  src: url('/fuentes/cuerpo.woff2') format('woff2');
  font-weight: 100 900;
  font-display: optional;
}

addEventListener('load', async () => {
  await document.fonts.ready;
  const usada = document.fonts.check('16px "Cuerpo"');
  navigator.sendBeacon('/rum-fuentes', JSON.stringify({
    acierto: usada,
    conexion: navigator.connection?.effectiveType ?? 'desconocida',
    repetida: performance.getEntriesByType('navigation')[0]?.type === 'reload',
  }));
});

El criterio de elección

Tres preguntas, en este orden.

¿Un glifo de reserva sería incorrecto en lugar de solo distinto? Es el caso de las fuentes de iconos y de los alfabetos que la reserva no cubre. Entonces block, y plantéate si esa fuente debería existir.

¿La fuente es la identidad visual del sitio y el desplazamiento es tolerable? Titulares de un sitio editorial o de marca. Entonces swap, aceptando que un intercambio tardío va a costar CLS, y compensándolo con el ajuste de la reserva.

¿El texto es contenido que el usuario va a leer de inmediato? El cuerpo de un artículo, una ficha de producto, una interfaz. Entonces optional con precarga si la tasa de acierto medida lo permite, y fallback si no.

Y el control manual, para los casos que no encajan en ninguna de las tres: la API de fuentes permite decidir tú el momento del intercambio, cargando la fuente sin que ninguna regla la reclame y aplicándola después mediante una clase.

const cara = new FontFace('Cuerpo', 'url(/fuentes/cuerpo.woff2)', { weight: '100 900' });

cara.load().then((cargada) => {
  document.fonts.add(cargada);
  document.documentElement.classList.add('fuente-lista');
});

/* La familia solo se aplica cuando la clase esta puesta */
.fuente-lista body { font-family: 'Cuerpo', 'Cuerpo reserva', sans-serif; }

Ese patrón permite, por ejemplo, no intercambiar si han pasado más de dos segundos, o no intercambiar si la conexión es mala, o no intercambiar si el usuario ya ha hecho scroll. Es más código y más control, y en un sitio grande suele acabar siendo la única forma de tener una política coherente.