Fuentes web y Core Web Vitals: cómo cargar sin frenar

Cargar fuentes web sin frenar la página depende de una decisión que casi nadie revisa: si la tipografía todavía no llegó, el navegador elige entre pintar el texto con otra o dejarlo invisible. Esa elección por defecto mueve el LCP, el FCP y el CLS, y se corrige con pocas líneas de CSS.

Por qué una tipografía puede costarte LCP y CLS

Qué pasa desde el CSS hasta el primer píxel de texto

Conviene desmontar un malentendido: un @font-face no descarga nada. El archivo se pide cuando algún estilo usa de verdad la fuente, así que si vive en una hoja externa, el navegador no sabe que existe hasta que tiene ese CSS.

El ciclo tiene tres etapas que son el hilo de este artículo: descubrimiento, entrega y renderizado. Los dos problemas que se achacan a las fuentes nacen en la tercera, pero se arreglan en las dos primeras.

Texto invisible y salto de layout: dos fallos distintos

El FOIT (flash of invisible text) es el texto que no se ve. Según web.dev, Chromium y Firefox bloquean el render del texto hasta 3 segundos si la fuente no llegó, y Safari lo bloquea indefinidamente. Cuando el bloque de texto es el elemento más grande de la pantalla, eso pega directo en el LCP.

El FOUT (flash of unstyled text) es el contrario: se pinta con la fuente del sistema y luego se cambia. El texto aparece antes, pero el cambio puede mover el layout. Y aquí va el matiz que casi nadie da, dicho por la propia auditoría de Lighthouse: FOIT y FOUT tienen el mismo impacto en el CLS cuando la fuente propia sustituye a la del sistema. Quitar el texto invisible no elimina el salto.

Cuánto pesa el problema, con datos

El Web Almanac 2025 encontró que el 87% de las páginas móviles analizadas usa al menos una fuente web, y que para los archivos de fuente solo el 24% declara dns-prefetch, el 22% preconnect y el 15% en escritorio y 16% en móvil usa preload. Una minoría optimiza lo que la mayoría usa.

font-display: los cinco valores y cuál te toca

Los dos periodos que explican todo

Todo font-display se explica con dos periodos. En el de bloqueo, si la fuente no está, el texto se dibuja con la de respaldo pero invisible. En el de intercambio, la de respaldo se ve y, si la propia llega, se sustituye.

Valor	Periodo de bloqueo	Periodo de intercambio
`auto`	Según el navegador	Según el navegador
`block`	2-3 segundos	Infinito
`swap`	0 ms	Infinito
`fallback`	100 ms	3 segundos
`optional`	100 ms	Sin intercambio

La propiedad es Baseline desde enero de 2020 según MDN: no hay excusa de compatibilidad para dejarla sin declarar.

Elige por prioridad, no por costumbre

Si lo primero es el rendimiento, optional: el texto no espera más de 100 ms y no hay salto por intercambio, a cambio de que si la fuente llega tarde no se use en esa visita. Si quieres ver el texto rápido y acabar con la tipografía de marca, swap, con el riesgo del salto en la primera carga. Si el texto debe verse con la fuente sí o sí, block, y entonces la entrega tiene que estar bien resuelta.

Fuentes de iconos: el caso donde swap no sirve

Una fuente de iconos rompe la lógica anterior. El respaldo no muestra otro tipo de letra, muestra otro carácter con otro significado: un icono de teléfono se convierte en una letra cualquiera. La salida es SVG, que además es mejor para accesibilidad; el detalle está en el artículo sobre accesibilidad en sitios web.

Que la fuente llegue antes: descubrimiento y entrega

Declara @font-face en el head, no al final de una hoja externa

web.dev recomienda incluir las declaraciones de fuentes, junto al CSS crítico, en el <head>: el navegador descubre antes el archivo. Y avisa de lo contrario: no conviene inlinear los archivos de fuente, porque engordan el documento principal y retrasan todo lo demás.

preconnect y preload, y las dos trampas clásicas

Para fuentes de Google, preconnect a los dos orígenes: el del CSS y el de los archivos, este último con crossorigin porque las fuentes viajan por CORS.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Dos trampas que cuestan caro. Primera: preload ignora unicode-range, así que precargar un archivo precarga el rango completo; conviene un solo formato. Segunda: una precarga compite por ancho de banda y solo se justifica para la fuente que se pinta primero. La familia completa de hints está en la guía de resource hints.

WOFF2, subsets y unicode-range

WOFF2 usa Brotli y comprime alrededor de un 30% mejor que WOFF, así que si sirves un solo formato, que sea ese. Y el tamaño: una fuente latina ronda entre 100 y 1.000 glifos, mientras que una CJK puede pasar de 10.000. unicode-range le dice al navegador qué caracteres cubre cada archivo y hace que descargue solo el que necesita.

Google Fonts lo hace por defecto, partiendo la familia en varios @font-face, y al pasar a self-hosting esa optimización se pierde si nadie la replica. En la API de Google Fonts, subset= se ignora cuando el navegador soporta unicode-range.

Menos archivos: variables y fuentes del sistema

Una fuente variable reemplaza varios archivos de pesos y estilos por uno: menos peticiones. La contrapartida honesta es que pesa más que un archivo de un solo estilo, así que conviene a quien usa muchos pesos. Para el cuerpo siempre queda font-family: system-ui, que son cero descargas.

Self-hosting frente a Google Fonts

Un matiz que rompe el dogma: el Web Almanac encontró que los sitios con fuentes de terceros renderizaban más rápido que los que servían fuentes propias. Si vas a self-hostear, confirma que tienes CDN y HTTP/2 y aplica subsetting y WOFF2 como lo haría el proveedor; la forma de decidirlo sin fe es servir un archivo desde tu dominio y comparar el tiempo de transferencia incluida la conexión.

Quitar el salto: métricas de la fuente de respaldo

size-adjust: qué escala exactamente

size-adjust es un multiplicador de contornos y métricas: escala los avances de glifo y las tablas de línea base, que es justo lo que hace falta para alinear dos fuentes al mismo font-size. Es Baseline desde septiembre de 2023 según MDN, así que la técnica dejó de ser experimental.

@font-face {
  font-family: "Respaldo Ajustada";
  src: local("Arial");
  size-adjust: 107%;
}

El resto de overrides (ascent-override, descent-override, line-gap-override) afinan la altura de línea y están explicados en el artículo de CLS y saltos de diseño.

Cómo encontrar el porcentaje sin adivinar

Carga las dos fuentes en una página de prueba, superpón un párrafo de texto real en el idioma que sirves (no "Lorem ipsum": tiene otra distribución de anchos) y ajusta hasta que el ancho de línea y la posición de la primera línea coincidan. Verifica en DevTools, panel Rendering, con Layout Shift Regions activo, y mide en móvil y escritorio con el font-size real.

Cómo comprobarlo en 2026: Lighthouse 13, PageSpeed Insights y Search Console

La auditoría ahora se llama font-display-insight

Lighthouse 13, publicado en octubre de 2025, consolidó las auditorías de rendimiento en insights y eliminó las antiguas del informe y del JSON. La auditoría clásica del texto visible ahora es font-display-insight. Marca las URLs de fuente que pueden provocar texto invisible, pero no decide si tu elección de font-display es la correcta para tu marca.

Del laboratorio al campo

El laboratorio es una carga simulada; el campo son usuarios reales, y la diferencia está explicada en PageSpeed Insights: campo y laboratorio. Un cambio de font-display se ve en laboratorio al instante y en campo cuando se acumula la ventana de 28 días del informe de Core Web Vitals, cuyos umbrales están en qué son las Core Web Vitals. Y el marco honesto: las fuentes no son un factor de ranking; mueven LCP, FCP y CLS, y Google dice que usa Core Web Vitals en sus sistemas de ranking, sin una señal única de page experience (lo aclara en su página de page experience).

Checklist y errores que se repiten

Una sola familia tipográfica si el diseño lo permite: cada familia extra es una descarga.
WOFF2 como único formato servido.
@font-face en el <head>, nunca al final de una hoja externa.
font-display: swap en titulares y marca, optional en el cuerpo.
Como mucho una fuente precargada, y con crossorigin.
Subsets por unicode-range si la familia se sirve desde tu dominio.
Fallback con size-adjust medido, no copiado de un blog.
Iconos en SVG, no en fuente de iconos.

La fuente no es un factor de ranking: es una decisión de render que se paga en LCP y en CLS. Eliges la estrategia una vez, la mides con el mismo método antes y después, y la olvidas hasta la próxima revisión de Core Web Vitals.