Llegas a una página, comienzas a leer y de repente el texto
Llegas a una página, comienzas a leer y de repente el texto desaparece un instante: solo ves huecos vacíos antes de que vuelva a aparecer. La culpa, muchas veces, no la tiene ni la imagen ni el banner. La tiene la tipografía.
El motivo es sencillo: la fuente tarda en descargarse. Mientras tanto, el navegador toma una decisión. Chrome y Firefox ocultan el texto durante un máximo de 3 segundos; Safari, en cambio, espera a que la fuente llegue antes de mostrar nada. Hay navegadores que optan por pintar el texto con una fuente del sistema y luego la sustituyen cuando llega la definitiva. Si ambas fuentes no ocupan el mismo espacio, todo el contenido que hay debajo da un salto. Eso es exactamente el CLS, y Google recomienda no superar 0,1.
Detectarlo no lleva más de diez minutos usando Chrome DevTools. Abre la pestaña Performance, reduce la velocidad de conexión a red lenta y graba una recarga de la página. En el panel lateral de Insights encontrarás dos apartados relevantes: Font display, que enumera las fuentes candidatas a usar font-display: swap u optional, y Layout shift culprits, que señala qué ha provocado el peor grupo de saltos, con las fuentes web entre los principales sospechosos.
Si prefieres verlo de forma visual, ve a Rendering y activa Layout shift regions. Al recargar, todo lo que se mueva aparecerá resaltado en azul.
También conviene abrir la pestaña Network y filtrar por Font: así sabes cuántos archivos de fuentes carga la página, cuánto pesan y si proceden de tu dominio o de uno externo.
Para comprobar si el problema afecta a usuarios reales y no solo a tus pruebas locales, el informe de Core Web Vitals de Search Console agrupa las URLs con problemas de CLS.
Hay tres soluciones que se pasan por alto con demasiada frecuencia:
font-display: optional para fuentes secundarias. Si la fuente no llega en 100 milisegundos, el navegador usa directamente la del sistema durante esa visita. Resultado: ningún salto.
Si prefieres usar swap, ajusta la fuente de respaldo con size-adjust y, cuando haga falta, con ascent-override o descent-override. Así consigues que Arial ocupe prácticamente el mismo espacio que tu fuente personalizada. El cambio sigue produciéndose, pero es imperceptible.
Precarga únicamente la fuente del texto principal, en formato WOFF2 y, a ser posible, alojada en tu propio dominio. Hay un detalle que se olvida constantemente: el preload de fuentes requiere el atributo crossorigin aunque la fuente esté en tu mismo servidor.
Lo que no tiene sentido es precargar cinco variantes o pesos de una misma familia tipográfica. Cada precarga compite por los recursos que realmente necesita el navegador para renderizar la página.
¿Y vosotros? ¿Tenéis configurado swap, optional o simplemente lo que viene por defecto?CLS por tipografía web: diagnóstico con DevTools y correcciones con font-display
Resumen técnico
El Cumulative Layout Shift (CLS) causado por fuentes web ocurre cuando el navegador sustituye una fuente de sistema por la fuente definitiva y ambas ocupan distinto espacio. Chrome y Firefox bloquean el texto hasta 3 segundos; Safari espera indefinidamente. El umbral de CLS aceptable es 0,1 según Core Web Vitals. Chrome DevTools ofrece tres puntos de análisis: Insights > Font display, Layout shift culprits y Rendering > Layout shift regions. En Network > Font se auditan número de archivos, peso y origen. Search Console > Core Web Vitals agrupa las URLs con CLS real de usuarios.
Análisis de implicaciones
font-display: optional elimina el salto completamente al limitar la espera a 100 milisegundos; si la fuente no llega en ese tiempo, el navegador usa la del sistema durante toda la visita. font-display: swap mantiene el riesgo de CLS si la fuente de respaldo y la definitiva no coinciden en métricas. La solución es ajustar descriptores como size-adjust, ascent-override y descent-override en la @font-face de respaldo. El preload sin atributo crossorigin es ignorado por el navegador, incluso cuando la fuente está alojada en el propio dominio.
Aplicación práctica
Para la fuente principal del cuerpo de texto: alojarla en el propio dominio en formato WOFF2, añadir <link rel=»preload» as=»font» crossorigin> y declarar font-display: swap con size-adjust ajustado sobre Arial o la fuente de sistema equivalente. Para fuentes decorativas o secundarias, usar font-display: optional. No precargar más de un peso por familia; cada preload compite con recursos críticos del render. Verificar el resultado con DevTools > Performance limitando la red a Slow 3G y revisar el campo real en Search Console.
Contexto del sector
Google incorporó CLS como señal de ranking en la actualización de Page Experience de 2021 y lo mantiene en los informes de Core Web Vitals. El CLS por tipografía es uno de los fallos más frecuentes en auditorías porque herramientas como Lighthouse no siempre lo detectan en condiciones de red rápida. Con la adopción de variable fonts y el aumento de fuentes de terceros cargadas desde Google Fonts o Adobe Fonts, el problema se ha agravado en stacks modernos basados en Next.js o WordPress con builders.
Artículo relacionado