font-display y sus cinco valores

font-display no configura la carga: configura la paciencia. Los cinco valores son cinco combinaciones de la duración del periodo de bloqueo y del de intercambio, y cada combinación produce un compromiso distinto entre ver el texto pronto, verlo con la tipografía correcta y no ver la página moverse. No hay un valor bueno; hay un valor bueno para cada tipo de texto.

Los periodos como parámetros

Recordando el ciclo de carga: bloqueo —hueco reservado, texto invisible—, intercambio —texto con la de respaldo, sustituible— y fallo —se queda la de respaldo para esta carga. font-display fija cuánto duran los dos primeros.

El descriptor va dentro de cada @font-face, así que puedes darle un valor distinto a cada peso y a cada subconjunto. Es más útil de lo que parece: el peso que aparece en el primer pantallazo merece otra política que la cursiva que solo se usa en las citas.

Qué ve el usuario

block es el peor valor para texto de lectura y el mejor para iconos. Con una conexión lenta, el usuario ve durante segundos una página estructurada con huecos en blanco donde hay contenido. Para una fuente de iconos, en cambio, es lo correcto: los glifos de respaldo de una fuente de iconos son cuadros vacíos o letras sueltas, y enseñarlos es peor que no enseñar nada.

swap es el valor por defecto de facto en la mayoría de proyectos y el más razonable para texto: se lee inmediatamente. El coste es el reflujo cuando llega la fuente, que puede ocurrir en cualquier momento porque el periodo de intercambio es infinito. Eso es lo desagradable de swap: si la fuente tarda diez segundos, el texto se recompone a los diez segundos, mientras el usuario está leyendo.

fallback acota ese riesgo. Después de unos tres segundos, la fuente deja de poder entrar en esta carga, así que el texto no se te mueve bajo los ojos cuando ya llevas rato leyendo. Es un compromiso razonable para texto secundario.

optional es el más agresivo y el más interesante. El navegador da unos 100 milisegundos y, si la fuente no está lista, no la usa en absoluto durante esta carga; la descarga sigue y entra en caché, con lo que en la siguiente navegación aparecerá desde el primer pintado. En conexiones muy lentas, Chromium puede incluso decidir no descargarla.

El único que garantiza cero desplazamiento

Esta es la propiedad que hace especial a optional y que casi nunca se menciona: es el único valor donde, después del primer pintado, la fuente no puede cambiar. Con swap y con fallback existe una ventana en la que el intercambio puede ocurrir y provocar un desplazamiento del contenido; con optional esa ventana termina antes de que se pinte nada.

Para un sitio con un presupuesto estricto de estabilidad visual, esa garantía es dura de igualar. Y el precio es explícito y honesto: la primera visita se ve con la fuente de sistema.

Ese precio es exactamente el motivo por el que casi nadie lo usa. En cuanto el equipo de diseño ve la portada con Arial en una prueba, la conversación se acaba. Merece la pena plantearla al revés: si la fuente de respaldo está bien elegida y con las métricas ajustadas, la diferencia es mucho menor de lo que se teme, y a cambio la primera carga es perfecta y todas las siguientes usan la tipografía.

Elegir por tipo de texto

/* texto de lectura: leerlo cuanto antes */
@font-face {
  font-family: 'Texto';
  src: url('/f/texto.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* titulares del primer pantallazo: sin salto */
@font-face {
  font-family: 'Display';
  src: url('/f/display.woff2') format('woff2');
  font-weight: 700;
  font-display: optional;
}

/* iconos: nunca ensenar el glifo de respaldo */
@font-face {
  font-family: 'Iconos';
  src: url('/f/iconos.woff2') format('woff2');
  font-display: block;
}

/* cursiva de las citas: secundaria, con ventana acotada */
@font-face {
  font-family: 'Texto';
  src: url('/f/texto-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: fallback;
}

El criterio que ordena todo esto: cuanto más importante sea leer el texto, menos bloqueo; cuanto más importante sea que no se mueva, menos intercambio. Los iconos son la excepción porque su versión de respaldo no comunica nada.