font-display: swap le dice al navegador que muestre el texto enseguida con una fuente de reserva y la cambie por la fuente web cuando llegue. Elimina la espera con texto invisible, pero no elimina el salto de diseño: si la fuente web es más ancha o más alta que la de reserva, el texto se recoloca en el cambio. Para tener a la vez texto rápido y un diseño estable, usa swap, carga la fuente pronto y ajusta el tamaño de la fuente de reserva al de la fuente web con size-adjust. Las secciones siguientes comparan los cinco valores de font-display y dan el código de cada paso.
Qué hace font-display swap
swap da a la fuente «un periodo de bloqueo extremadamente corto y un periodo de cambio infinito» (an extremely small block period and an infinite swap period) (MDN, última modificación el 10 de septiembre de 2026). Dicho de forma sencilla, el texto nunca queda oculto mucho tiempo, y la fuente web se usa cuando termina de cargar, aunque sea un minuto después.
MDN define así los dos periodos. Durante el periodo de bloqueo, un elemento que usa una fuente aún no cargada debe mostrarse con una fuente de reserva invisible. Durante el periodo de cambio se muestra con una fuente de reserva visible, y una fuente que carga a tiempo se usa con normalidad. Los nombres habituales son FOIT (flash of invisible text, el periodo de bloqueo) y FOUT (flash of unstyled text, el cambio).
Sin font-display, decide el navegador. La guía de fuentes de web.dev (octubre de 2022) dice que los navegadores basados en Chromium y Firefox bloquean el renderizado del texto hasta 3 segundos si la fuente no ha cargado, y que Safari lo bloquea indefinidamente (web.dev). Considéralo el comportamiento de esas versiones y comprueba los navegadores que admites.
font-display es Baseline de reciente disponibilidad desde enero de 2020 y de disponibilidad amplia desde julio de 2022; web-features lo recoge desde Chrome 60, Firefox 58, Safari 11.1 y Safari iOS 11.3 (web-features 3.44.0, 22 de octubre de 2026).
@font-face {
font-family: "Brand";
src: url("/fonts/brand.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}Comparación de los valores de font-display
Los cinco valores solo se diferencian en cuánto tiempo el texto permanece invisible y hasta cuándo se puede cambiar por una fuente tardía. Periodos según la tabla de web.dev:
| Valor | Periodo de bloqueo | Periodo de cambio | Para qué usarlo |
|---|---|---|---|
auto |
Decide el navegador | Decide el navegador | Sin elección explícita (valor por defecto) |
block |
De 2 a 3 segundos | Infinito | Casi nunca: el texto queda oculto mientras carga la fuente |
swap |
0 ms | Infinito | Titulares y texto de marca que deben usar la fuente web |
fallback |
100 ms | 3 segundos | Una solución intermedia: periodo de bloqueo mínimo y periodo de cambio corto |
optional |
100 ms | Ninguno | Texto del cuerpo, donde importa más un diseño estable que la fuente exacta |
Web.dev recomienda swap cuando el texto debe mostrarse rápido y renderizarse con la fuente web, siempre que la fuente llegue lo bastante pronto para no causar un salto de diseño. Su opción de mayor rendimiento es optional, con la contrapartida de que la fuente web no se usará si llega tarde. Sugiere swap para la marca y los elementos distintivos, y optional para el texto del cuerpo (web.dev). Ese reparto es una recomendación; ninguna especificación lo exige.
Lighthouse también lo comprueba. Su análisis Font display (octubre de 2025) te pide poner font-display en swap o optional para que el texto siga visible, y para swap remite a los ajustes de métricas de la fuente para reducir el salto de diseño (Chrome for Developers).
Precarga la fuente que importa
La precarga adelanta la descarga de la fuente, lo que acorta el tiempo con la fuente de reserva. La precarga de una fuente alojada por ti necesita as="font", el tipo MIME y crossorigin:
<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>MDN dice que crossorigin es obligatorio en las precargas de fuentes y que debe coincidir con el modo CORS de la petición «aunque la petición no sea de otro origen» (even when the fetch is not cross-origin), porque las fuentes se piden en modo CORS anónimo (MDN, mayo de 2026).
Precarga solo lo que necesita la primera pantalla. Web.dev advierte de que la precarga ignora las declaraciones unicode-range y de que, usada con prudencia, debe servir para cargar un único formato de fuente. Para las fuentes que no hacen falta de inmediato, no la uses. La precarga es Baseline de reciente disponibilidad desde enero de 2021 y de disponibilidad amplia desde julio de 2023 (web-features 3.44.0).
Google Fonts o alojamiento propio
Con Google Fonts, añade el parámetro display a la URL de la hoja de estilos y conecta pronto con los dos orígenes de fuentes:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap" rel="stylesheet">El parámetro display admite los mismos cinco valores, y la documentación de Google dice que el valor por defecto es auto y que normalmente conviene otro distinto (Google Fonts, actualizado en julio de 2024). Los archivos de fuentes necesitan crossorigin en su preconnect porque «a diferencia de las hojas de estilo, los archivos de fuentes deben enviarse por una conexión CORS» (unlike stylesheets, font files must be sent over a CORS connection) (web.dev).
¿Qué es más rápido, Google Fonts o el alojamiento propio? Web.dev dice que la diferencia es «menos clara» de lo que parece («less clear cut»): en los datos del Web Almanac que cita, las fuentes de terceros se renderizaron más rápido que las propias, y el alojamiento propio tiene más probabilidades de ganar con una CDN y HTTP/2. Si alojas tú las fuentes, las optimizaciones corren de tu cuenta: sirve WOFF2 (web.dev dice que comprime un 30% mejor que WOFF), crea subconjuntos con unicode-range y revisa antes la licencia de la fuente.
Evita el salto de diseño con una fuente de reserva
El salto de diseño en el cambio se produce porque la fuente de reserva y la fuente web tienen métricas distintas, y la solución es ajustar la de reserva para que coincida. La guía de CLS de web.dev cita las «fuentes que se renderizan más grandes o más pequeñas que su fuente de reserva inicial» (fonts that render larger or smaller than its initial fallback) como causa de saltos de diseño, y un buen valor de CLS es 0,1 o menos (web.dev, abril de 2023). Para saber más sobre todas las causas, consulta la guía de cumulative layout shift.
La herramienta es un segundo @font-face que apunta a una fuente local y la reescala. size-adjust escala los contornos y las métricas de los glifos según un porcentaje, y ascent-override, descent-override y line-gap-override fijan la caja de la línea:
@font-face {
font-family: "Poppins fallback";
src: local("Arial");
size-adjust: 60.85%;
}
body {
font-family: "Poppins", "Poppins fallback", sans-serif;
}El 60,85% corresponde a una sola pareja de fuentes, Poppins sobre Arial, así que tienes que calcular el tuyo. El artículo de Chrome dice que size-adjust es el ancho medio de carácter de la fuente web dividido entre el de la fuente de reserva (538,01 / 884,14 = 60,85% en este caso), que en la mayoría de los casos solo se puede aproximar, y que los tres descriptores override se calculan a partir del ascent, el descent y el line gap de la fuente web divididos entre las unidades por em y el valor de size-adjust. Calcúlalos para tu fuente con una de las herramientas que enumera el artículo (actualizado en febrero de 2023): Fontaine, Capsize, next/font (desde Next 13) o @nuxtjs/fontaine (Chrome for Developers), y comprueba el resultado en el navegador antes de fiarte de él.
El soporte varía según el descriptor, según MDN browser-compat-data 8.1.7 (octubre de 2026):
| Descriptor | Chrome | Firefox | Safari |
|---|---|---|---|
size-adjust |
92 | 92 | 17 |
ascent-override, descent-override, line-gap-override |
87 | 89 | sin soporte |
Web-features no incluye los tres override como Baseline, así que Safari en iPhone los ignora y aún puede producir un pequeño salto. La fuente de reserva también cambia según el dispositivo: el artículo de Chrome señala que una fuente de reserva Roboto en Android necesita valores distintos que Arial.
El efecto en el texto del LCP en móviles
Las fuentes web pueden retrasar el Largest Contentful Paint cuando el elemento más grande es texto. La guía de LCP de web.dev dice que el texto solo cuenta como renderizado después del periodo de bloqueo, así que puede informarse como LCP un elemento menor hasta que aparece el texto con la fuente web; cuenta como candidatos a LCP los elementos de texto de bloque como <p> y <h1>, y un buen LCP es 2,5 segundos o menos (web.dev, septiembre de 2025).
En una página cuyo LCP es un titular con una fuente web, la descarga de la fuente compite con todo lo demás en una conexión móvil lenta, lo que hace que swap o una precarga merezcan el esfuerzo. Cómo leer el elemento LCP está en la guía de auditoría móvil con Lighthouse, y las demás causas de un LCP lento están en la guía de pruebas de velocidad en móvil.
Comprueba el resultado con el ancho de un móvil
Tras el cambio, mira la página en una carga en frío. Recarga con la caché desactivada con el ancho de un móvil y observa si el titular salta cuando llega la fuente. Mobile View Extension recarga la pestaña con el user agent, el tamaño de pantalla y la densidad de píxeles de un móvil, así que ves el diseño móvil y qué fuente de reserva aparece. No mide el tiempo de carga, el salto de diseño ni ninguna métrica de velocidad, y usa las fuentes y la conexión de tu ordenador, así que la fuente de reserva de un móvil puede verse distinta. Mide con Lighthouse y con datos de campo.
Preguntas frecuentes
¿Qué hace font-display swap?
Muestra el texto de inmediato con una fuente de reserva y lo sustituye por la fuente web cuando esta carga, sin límite de lo tarde que puede producirse ese cambio. El periodo de bloqueo es extremadamente corto y el periodo de cambio es infinito (MDN).
¿Es mejor font-display swap u optional?
Ninguno es mejor en todos los casos: swap siempre termina con tu fuente web pero puede mover el diseño, mientras que optional evita el salto y puede prescindir de la fuente web si la carga es lenta. Web.dev sugiere swap para la marca y optional para el texto del cuerpo.
¿font-display swap causa saltos de diseño?
Puede. Cuando la fuente de reserva y la fuente web tienen métricas distintas, el cambio altera el tamaño del texto y la altura de línea y puede mover el contenido, algo que web.dev recoge como causa de saltos de diseño. Ajustar la fuente de reserva con size-adjust lo reduce.
¿Debo precargar las fuentes web?
Precarga la fuente o las dos fuentes que necesita la primera pantalla, con as="font" y crossorigin. Web.dev aconseja usarla con moderación, porque la precarga ignora unicode-range.