Introducción: por qué evitas saltos de diseño al cargar fuentes

Los saltos de diseño (layout shifts) al cargar fuentes son una causa frecuente de mala experiencia de usuario y de un aumento del valor de Cumulative Layout Shift (CLS) en mediciones de rendimiento. En WordPress, donde los temas y plugins suelen cargar fuentes externas o autoalojadas, es habitual que el texto cambie de altura o peso cuando la webfont llega, provocando reflujo de contenido, botones que cambian de posición o páginas que “brincan” al terminar la carga.

Este artículo explica en detalle qué provoca esos saltos y cómo evitarlos usando font-display junto a otras prácticas recomendadas (preload, stack de fuentes adecuado, autoalojamiento y ajustes de métricas), con ejemplos listos para integrar en un tema o plugin de WordPress.

Conceptos clave

• FOIT (Flash Of Invisible Text): navegador oculta texto hasta que la webfont carga (puede causar bloqueos visibles de texto durante un tiempo).
• FOUT (Flash Of Unstyled Text): navegador muestra texto con una fuente de sistema provisional y lo reemplaza por la webfont cuando llega (evita bloqueos, pero puede causar cambio visual si la métrica difiere).
• CLS (Cumulative Layout Shift): métrica de Core Web Vitals que mide cambios inesperados de layout. Evitar cambios de tamaño/posición del contenido es crítico.
• font-display: descriptor CSS que controla la estrategia de renderizado de fuentes web (block, swap, fallback, optional).

Cómo funciona font-display y qué opción elegir

El descriptor @font-face { font-display: … } permite elegir la política de renderizado:

• block: periodo corto de FOIT (texto invisible), luego FOUT si sigue sin cargar. No recomendado para CLS.
• swap: muestra inmediatamente una fuente de fallback y la sustituye por la webfont al llegar. Es la opción más práctica para reducir CLS porque evita que el texto desaparezca puede producir FOUT pero con menor impacto en CLS.
• fallback: breve periodo de bloque y luego fallback permanente si la fuente tarda combina FOIT corto y FOUT limitado.
• optional: comportamiento similar a fallback pero el navegador puede decidir no descargar la webfont en condiciones de red malas (reduce coste de red y CLS en dispositivos lentos).

Recomendación general: usar font-display: swap o optional (según estrategia de prioridad) y complementar con preload, stack de fallback que coincida en métricas y, cuando sea posible, autoalojar y subsetting de fuentes.

Pasos prácticos para evitar saltos (resumen)

1. Autoalojar la fuente (preferible) o controlar la URL de Google Fonts con display=swap.
2. Preload de la fuente crítica con rel=preload as=font crossorigin en la cabecera.
3. Declarar @font-face con font-display: swap y formatos modernos (woff2).
4. Asegurar stack de fallback que coincida lo más posible en métricas (sans-serif compatible).
5. Opcional: usar ajuste de métricas (size-adjust/ascent-override) si el navegador lo soporta.
6. Medir CLS con Lighthouse/Chrome DevTools y probar redes lentas para validar comportamiento.

Ejemplo 1 — @font-face autoalojada con font-display y preload

Código CSS para declarar una fuente woff2 con font-display: swap. Incluye el enlace de preload que debe ir en la cabecera (head).

/ @font-face declarado en tu archivo CSS principal o inline en head /
@font-face {
  font-family: MiFuente
  src: url(/wp-content/themes/mi-tema/fonts/mifuente.woff2) format(woff2)
  font-weight: 100 900
  font-style: normal
  font-display: swap
  / Opcional: size-adjust/ascent-override (soporte parcial, comprobar compatibilidad) /
  / size-adjust: 100% /
}

/ Uso en tu CSS /
body { font-family: MiFuente, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif }

En la cabecera (head) añade el preload de la fuente crítica. En WordPress se puede imprimir este link en functions.php como se muestra más abajo.

Ejemplo 2 — Añadir preload desde functions.php (WordPress)

Una forma sencilla de inyectar el link rel=preload desde el tema es engancharse a wp_head. Pega esto en functions.php de tu tema (o child theme).

n
}
?>

Notas sobre el preload

• Usa crossorigin cuando la fuente se sirve con CORS (necesario para la mayoría de woff2 autoalojadas). Cuando autoalojas y la sirves desde el mismo dominio, aún es buena práctica incluirlo si usas subdominios o CDN.
• Preload mejora la prioridad de descarga y reduce el tiempo hasta el reemplazo por la webfont, disminuyendo la probabilidad de cambio perceptible.

Ejemplo 3 — Google Fonts: usar display=swap y preload

Si usas Google Fonts, añade display=swap a la URL para que el servidor genere font-display=swap en sus @font-face. Además puedes preconnect a fonts.gstatic.com para acelerar la conexión y opcionalmente preload de la fuente woff2 (implementar con cuidado porque Google suministra nombres generados).

Si prefieres control total y menor latencia, descarga y autoalojar los .woff2 de Google Fonts y aplica la estrategia anterior (preload font-display).

Combinar font-display con fallback y stacks con métricas similares

Para minimizar cambios de layout cuando se aplica la webfont, es fundamental elegir un fallback que tenga métricas cercanas (altura de x, ancho medio). Por ejemplo, si tu web usa una sans geométrica moderna, prioriza Roboto/Inter/system-ui en la pila y evita caer a una serif muy distinta.

/ Ejemplo de stack mitigando cambios de ancho/alto /
h1, h2, p {
  font-family: MiFuente, Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif
}

Opciones avanzadas: ajustar métricas y variable fonts

Existen técnicas más avanzadas para evitar SHIFT al reemplazar fuentes:

• Font metrics override (ascent-override, descent-override, line-gap-override, size-adjust): permiten alinear métricas entre la webfont y la fallback. Soporte parcial en navegadores modernos verificar compatibilidad antes de usar en producción.
• Variable fonts: una variable font bien configurada puede reducir la necesidad de múltiples archivos y mejorar rendimiento. Aun así, aplicar preload y font-display es recomendable.
• Subsetting: incluye solo los caracteres necesarios (por ejemplo, eliminar glifos no usados) para reducir peso y acelerar carga.

Implementación práctica completa en WordPress (paso a paso)

1. Decide si usarás Google Fonts o autoalojarás. Autoalojar da mayor control sobre preload y CORS.
2. Genera/descarga los .woff2 necesarios (subsetting recomendado).
3. Sube los archivos a /wp-content/themes/tu-tema/fonts/ o a un CDN con CORS correctamente configurado.
4. En functions.php añade la inserción del preload en head (ejemplo arriba) y encola tu hoja de estilos normalmente.
5. En tu CSS principal declara @font-face con font-display: swap y formatos woff2.
6. Define un stack de fallback que coincida en métricas y aplica estilos críticos inline si es necesario (CSS crítico en head para evitar cambios al pintar por primera vez).
7. Prueba en Lighthouse y con throttling de red en DevTools (simula conexiones 3G/Slow-3G) y comprueba CLS asegúrate de revisar páginas con contenido dinámico (ads, embeds) que también pueden causar shifts).

Medición y validación

Para comprobar que los cambios funcionan:

• Ejecuta Lighthouse/Chrome DevTools para medir CLS y First Contentful Paint (FCP).
• Observa visualmente la carga: con font-display: swap debería aparecer texto inmediatamente con la fuente de fallback y luego cambiar sin alterar posiciones importantes si las métricas están bien emparejadas.
• Revisa en dispositivos y redes lentas en conexiones malas, considera font-display: optional para no gastar ancho de banda en fuentes no críticas.

Plugins y utilidades útiles en WordPress

• Plugins para autoalojar y optimizar Google Fonts (por ejemplo, plugins que descargan Google Fonts y generan @font-face locales).
• Plugins de rendimiento que permiten añadir preload y controlar la carga de fuentes (caches, critical CSS, preconnect).
• Herramientas de subsetting (glyphhanger, google-webfonts-helper) para generar .woff2 reducidos.

Consideraciones y trade-offs

• Swap evita CLS pero puede producir FOUT (texto inicialmente con otra fuente). Para la mayoría de sitios esto es preferible a FOIT.
• Optional reduce descargas en redes malas pero puede dejar la fuente como fallback permanente en dispositivos lentos.
• El preload mejora tiempos pero añadir demasiados preload puede congestionar la prioridad de red limita el preload a las fuentes críticas (títulos/hero/branding).
• Revisar compatibilidad de nuevas propiedades (ascent-override, size-adjust) y degradar de forma segura cuando no están soportadas.

Checklist final para producción

• ¿font-display declarado? (recomendado: swap)
• ¿Preload para las fuentes críticas añadido en head con crossorigin cuando sea necesario?
• ¿Stack de fallback definido y coherente con las métricas?
• ¿Fuentes autoalojadas o Google Fonts con display=swap?
• ¿Subsetting aplicado y tamaño de fuente razonable (woff2 preferible)?
• ¿CLS probado en Lighthouse y en dispositivos reales/emulados?

Resumen

Evitar saltos de diseño al cargar fuentes en WordPress se logra con una combinación de políticas de renderizado (font-display), priorización de recursos (preload/preconnect), un stack de fallback cuidado y, cuando es posible, autoalojamiento y subsetting. font-display: swap es la opción más práctica para reducir CLS, y siempre debe complementarse con preload y pruebas reales para garantizar que la web mantiene estabilidad visual al cargar las webfonts.