Propiedad CSS font-display

El descriptor CSS font-display controla el comportamiento de una fuente web personalizada mientras se está descargando: si el navegador muestra el texto de respaldo de inmediato, oculta el texto hasta que llegue la fuente o desiste de cargarla por completo. Es un descriptor que se usa dentro de la regla @font-face, no una propiedad normal que se aplica a un elemento.

Esta página explica el problema de carga que resuelve font-display, recorre cada uno de sus cinco valores y ofrece consejos prácticos sobre cuál elegir.

Por qué existe font-display

Originalmente la web estaba limitada a un puñado de fuentes "seguras para la web" instaladas en el equipo del usuario. La regla @font-face cambió eso: puedes incluir tus propios archivos de fuente e indicarle al navegador dónde descargarlos. Sin embargo, los archivos de fuente pueden ser grandes y su descarga lleva tiempo. Durante ese retraso, el navegador debe decidir qué renderizar para el texto con esa fuente. Existen dos comportamientos contrapuestos:

FOIT — flash of invisible text (destello de texto invisible). El navegador oculta el texto hasta que la fuente personalizada termina de descargarse. En una conexión lenta, el usuario puede quedarse mirando una página en blanco durante segundos. Este es el comportamiento predeterminado en la mayoría de los navegadores.
FOUT — flash of unstyled text (destello de texto sin estilo). El navegador muestra el texto de inmediato con una fuente de respaldo y lo vuelve a renderizar cuando carga la fuente personalizada. El contenido es legible al instante, pero visualmente "salta" cuando se produce el cambio.

Ninguno es universalmente mejor, por lo que font-display te permite indicarle al navegador qué equilibrio prefieres.

Los tres períodos de font-display

Cada valor se define en términos de tres períodos de la línea de tiempo que comienzan cuando la fuente empieza a cargarse:

Período de bloqueo — el texto se renderiza de forma invisible (sigue ocupando espacio). Si la fuente carga durante este período, se utiliza. Si el período termina antes, el navegador recurre a una fuente del sistema.
Período de intercambio — el texto se muestra con una fuente de respaldo, pero el navegador realizará el intercambio a la fuente personalizada en cuanto termine de cargarse.
Período de fallo — el navegador trata la carga de la fuente como fallida y mantiene la fuente de respaldo, incluso si la fuente llega más tarde.

Cada valor simplemente define cuánto duran los períodos de bloqueo e intercambio.

Valor inicial	auto
Se aplica a	Regla `@font-face`.
Heredado	No.
Animable	No.
Versión	CSS Fonts Module Level 4
Sintaxis DOM	object.style.fontDisplay = "swap";

Sintaxis

font-display: auto | block | swap | fallback | optional;

Dado que font-display es un descriptor, reside dentro de un bloque @font-face junto con font-family y src:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-display: swap; /* show fallback text immediately, then swap in the font */
}

Luego usas la fuente de la manera habitual. El descriptor se lee automáticamente cuando la fuente carga:

body {
  font-family: 'MyWebFont', Arial, sans-serif;
}

Valores

Valor	Período de bloqueo	Período de intercambio	Lo que ve el usuario
`auto`	predeterminado del navegador	predeterminado del navegador	Lo que el navegador prefiera; generalmente se comporta como `block`.
`block`	corto (~3 s)	infinito	Texto invisible primero, luego la fuente cuando llegue (tendencia a FOIT).
`swap`	ninguno / mínimo	infinito	Texto de respaldo al instante, reemplazado por la fuente personalizada al cargar (FOUT).
`fallback`	muy corto (~100 ms)	corto (~3 s)	Texto invisible brevemente, luego respaldo; la fuente solo se usa si carga rápido.
`optional`	muy corto (~100 ms)	ninguno	Respaldo si la fuente no está en caché; sin intercambio que provoque desplazamiento del diseño.

Las duraciones exactas de los períodos no están fijadas en la especificación — cada navegador elige las suyas. Los valores anteriores son los predeterminados habituales de Chrome y Firefox.

¿Qué valor deberías elegir?

swap es la opción más popular para el texto del cuerpo. El contenido es legible de inmediato, lo cual es excelente para la accesibilidad y la percepción del rendimiento. La desventaja es un reajuste visible cuando la fuente se intercambia.
optional es la mejor opción cuando evitar el desplazamiento del diseño importa más que garantizar que aparezca la fuente. El navegador usa la fuente personalizada solo si puede cargarse casi al instante (normalmente desde la caché); de lo contrario, se queda con la fuente de respaldo y nunca realiza el intercambio. Esto mantiene bajo tu puntaje de Cumulative Layout Shift.
fallback es un punto intermedio: una breve ventana invisible, luego la fuente de respaldo, con una corta oportunidad de intercambio. Adecuado para fuentes que son agradables de tener pero no críticas.
block es adecuado para fuentes de iconos o branding donde el glifo incorrecto (por ejemplo, un carácter de respaldo en lugar de un icono) quedaría mal — es preferible no mostrar nada que mostrar algo incorrecto.
auto deja la decisión al navegador y no te da ningún control, por lo que rara vez es una elección deliberada.

font-display es un descriptor, no una propiedad, por lo que las palabras clave initial e inherit no se le aplican de la misma forma que a las propiedades CSS normales.

Compatibilidad con navegadores

font-display está soportado en todos los navegadores modernos (Chrome, Edge, Firefox, Safari y Opera). En navegadores que no reconocen una palabra clave determinada, el descriptor simplemente se ignora y se aplica el comportamiento de carga predeterminado del navegador, por lo que es seguro usarlo sin un respaldo.

Propiedades relacionadas

@font-face — la regla que define una fuente personalizada y donde reside font-display.
font-family — define qué fuente (incluida la pila de respaldo) usa un elemento.
font-weight — controla el grosor del texto.
font — la forma abreviada de varias propiedades de fuente a la vez.

Práctica

¿Cuáles son los posibles valores de la propiedad CSS 'font-display'?