¿Qué controla font-display?
font-display es una descriptor CSS que se declara dentro de la regla @font-face y controla el comportamiento del navegador mientras descarga una web font. Define qué hacer con el texto que usa esa fuente durante el período en que la fuente todavía no está disponible:
- ¿Mostrar texto invisible (FOIT — Flash of Invisible Text)?
- ¿Mostrar texto con la fuente de fallback y luego sustituir (FOUT — Flash of Unstyled Text)?
- ¿Cuánto tiempo esperar antes de decidir?
Los cinco valores
| Valor | Bloqueo inicial | Período de intercambio | Comportamiento |
|---|---|---|---|
auto | Depende del navegador (típicamente block) | Igual | No predecible. Evitar. |
block | Hasta 3 s (FOIT) | Indefinido | Texto invisible 3 s y luego intercambio. Hunde LCP. |
swap | 0 ms | Indefinido | Texto fallback inmediato y swap cuando la fuente cargue. Posible CLS. |
fallback | 100 ms (FOIT corto) | 3 s | Compromiso entre block y swap. |
optional | 100 ms | 0 ms | Si la fuente no carga en 100 ms, NO se usa. Evita reflow. |
El recomendado: swap (con cautela)
swap es la recomendación general para mejorar LCP porque permite al navegador renderizar el texto inmediatamente con la fuente fallback. Pero introduce dos riesgos:
- FOUT visible: el usuario ve un cambio de tipografía cuando la fuente carga.
- CLS: si la fuente fallback tiene métricas distintas (ancho, alto-x, line-height) a la fuente final, los textos cambian de tamaño y empujan el contenido.
Solución: combinar swap con fuente fallback calibrada (técnica fontpie/capsize):
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
font-display: swap;
size-adjust: 107%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}Estas propiedades ajustan las métricas de la fuente fallback para que coincidan con las de Inter, eliminando casi todo el reflow.
Cuándo usar optional
optional es ideal cuando:
- La web font es decorativa y la fallback es aceptable visualmente.
- El usuario está en una conexión lenta y prefieres NO mostrar la fuente custom antes que sufrir reflow.
- Quieres LCP perfecto sin riesgo de CLS.
Trade-off: en redes lentas, los usuarios nunca verán la web font (lo que puede o no ser deseable).
Cuándo evitar block
block es la opción peor para Performance: 3 segundos de texto invisible mientras descarga la fuente. Solo aceptable en:
- Iconos de fuentes icon-only (Material Icons, Font Awesome) donde el texto fallback no tiene sentido.
- Sitios de presentación pura sin contenido textual crítico above-the-fold.
Combinación con preload
font-display: swap + <link rel="preload" as="font" type="font/woff2" crossorigin> es el combo estándar para web fonts críticas:
<link rel="preload" as="font" type="font/woff2" crossorigin
href="/fonts/inter-latin-wght-normal.woff2">Esto le dice al navegador: “Descarga esta fuente con prioridad alta desde el principio”. Cuando llegue al @font-face en el CSS, ya estará disponible y el FOUT será mínimo o nulo.
Cómo lo aplicamos
smedialab.es usa @fontsource-variable/inter con font-display: swap heredado del paquete + preload del woff2 latino en el Layout + fuente fallback calibrada con fontpie en src/styles/fonts-fallback.css. Esto da LCP rápido (texto fallback instantáneo) y CLS muy bajo (las métricas calibradas evitan reflow al cargar Inter).
Para clientes de diseño web, auditamos font-display en cada @font-face antes del go-live.