CSS Font-Display Swap: ¿Para qué usarlo?

El aviso de PageSpeed Insights “Asegúrate de que el texto permanece visible mientras se carga la fuente web” aparece cuando el navegador puede dejar contenido oculto mientras descarga una tipografía. La solución suele pasar por aplicar font-display: swap, revisar cómo se cargan las fuentes y evitar que archivos .woff2, .woff, .ttf u .otf bloqueen la lectura inicial de la página.

En Rodanet trabajamos el WPO como parte del SEO técnico porque una web rápida no depende solo del servidor o de las imágenes. Las fuentes web también influyen en la experiencia, en la percepción de velocidad y, en algunos casos, en métricas como LCP o CLS si se cargan tarde o provocan saltos visuales.

Si además estás optimizando un WordPress completo, este ajuste debería formar parte de una revisión más amplia. En nuestra guía de WPO para optimizar la velocidad de WordPress explicamos otros puntos que conviene revisar junto a las fuentes: caché, CSS crítico, imágenes, JavaScript, hosting y plugins.

Qué significa el aviso de font-display en PageSpeed Insights

PageSpeed Insights y Lighthouse muestran este diagnóstico cuando detectan fuentes web que no tienen una estrategia clara de renderizado. En la práctica, el navegador puede esperar a que la fuente personalizada esté disponible antes de pintar el texto, lo que genera el conocido FOIT, o “flash de texto invisible”.

El problema no es que uses una tipografía personalizada. El problema aparece cuando esa fuente tarda en descargarse y el usuario ve un espacio vacío, un texto que aparece tarde o un cambio brusco cuando la fuente final sustituye a la fuente del sistema.

Este aviso suele afectar a recursos de tipografía en formatos como:

• .woff2, el formato más recomendable para la mayoría de proyectos actuales.
• .woff, útil como compatibilidad en casos concretos.
• .ttf, habitual en fuentes antiguas o mal optimizadas.
• .otf, frecuente en tipografías de diseño, aunque no siempre ideal para web.

La prioridad debería ser clara: usar pocas variantes, cargar solo los pesos necesarios y aplicar una estrategia de visualización. Con esto evitas que una decisión estética penalice la lectura inicial de la página.

Qué es font-display y qué hace exactamente

font-display es un descriptor que se añade dentro de una regla @font-face. Su función es indicar al navegador cómo debe comportarse mientras la fuente personalizada todavía no está descargada, algo importante porque las fuentes son recursos externos y no siempre llegan a tiempo para el primer renderizado.

La opción más habitual para corregir el aviso de PageSpeed es font-display: swap. Con ella, el navegador muestra primero una fuente alternativa del sistema y, cuando la fuente personalizada está disponible, la sustituye.

Un ejemplo básico sería este:

@font-face{ font-family: ‘Pacifico’; src: url(‘/assets/Pacifico-Bold.woff2’) format(‘woff2’); font-weight: 700; font-style: normal; font-display: swap; }

Esto no reduce por sí solo el peso del archivo, pero sí evita que el texto quede invisible. Por eso conviene entender font-display como una mejora de renderizado y experiencia, no como una compresión de la fuente.

Valores principales de font-display

No siempre conviene usar el mismo valor en todos los casos. En una web corporativa, un blog o un ecommerce, lo normal es priorizar que el usuario pueda leer cuanto antes, pero hay matices según el tipo de fuente y su importancia visual.

Para la mayoría de casos, swap es la solución práctica. Aun así, si el cambio de fuente genera saltos visuales, puede tener sentido probar fallback u optional y ajustar la fuente alternativa para que tenga métricas parecidas.

Cómo localizar las fuentes que provocan el problema

El primer paso es analizar una URL concreta en PageSpeed Insights. Si el aviso aparece, normalmente lo verás en la zona de diagnósticos con el texto “Asegúrate de que el texto permanece visible mientras se carga la fuente web”.

Al desplegar el diagnóstico, PageSpeed muestra los archivos de fuente afectados. Ahí puedes identificar si el problema viene de Google Fonts, del theme de WordPress, de un plugin, de Elementor, de un constructor visual o de una fuente cargada desde tu propio servidor.

También puedes confirmarlo desde el navegador. En Chrome DevTools, entra en la pestaña Network, filtra por “Font” y recarga la página. Así verás qué fuentes cargan, cuánto pesan, desde dónde se sirven y si realmente son necesarias.

Antes de tocar código, revisa tres puntos básicos:

• Si la fuente se usa en textos visibles o solo en una parte secundaria.
• Si estás cargando pesos que no utilizas, como 300, 500, 600, 700 y 900 sin necesidad.
• Si hay varias familias tipográficas cuando una sola sería suficiente.

Este diagnóstico previo evita aplicar parches a ciegas. En muchos WordPress, el problema no es una única fuente sin font-display, sino una acumulación de fuentes duplicadas por theme, plugin y constructor.

Cómo solucionar font-display swap desde un archivo CSS

Si la fuente se declara con @font-face en un archivo CSS propio, la solución más directa es añadir font-display dentro de esa misma regla. Es importante colocarlo en cada declaración de fuente, no solo una vez en el archivo.

Un ejemplo correcto sería:

@font-face{ font-family: ‘Roboto’; src: url(‘/fonts/roboto-regular.woff2’) format(‘woff2’); font-weight: 400; font-style: normal; font-display: swap; }

Y si tienes otra variante en negrita, debes repetir la declaración:

@font-face{ font-family: ‘Roboto’; src: url(‘/fonts/roboto-bold.woff2’) format(‘woff2’); font-weight: 700; font-style: normal; font-display: swap; }

El error frecuente es añadir font-display solo en una variante y dejar el resto sin definir. Si PageSpeed sigue mostrando el aviso, revisa que todas las fuentes detectadas tengan su propia declaración con font-display.

Dónde tocarlo en WordPress

En WordPress, la ubicación exacta depende del origen de la fuente. Puede estar en el CSS del theme, en un child theme, en un plugin de optimización, en el constructor visual o en una opción de tipografías del propio tema.

Si trabajas con un theme a medida o child theme, lo más limpio suele ser editar la declaración @font-face en tu CSS. Si el theme genera las fuentes dinámicamente, conviene revisar si tiene una opción nativa para font-display antes de sobrescribir código.

En nuestra experiencia, la solución más estable es controlar las fuentes desde el proyecto: alojarlas localmente cuando tenga sentido, declarar solo las variantes necesarias y evitar que varios plugins inyecten familias distintas en el frontend.

Cómo aplicar font-display en Google Fonts

Si la fuente viene de Google Fonts, lo normal es que se cargue mediante una etiqueta link en el HTML. En ese caso, puedes añadir el parámetro display=swap a la URL de la hoja de estilos.

Un ejemplo actualizado con Google Fonts sería:

<link href=»https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap» rel=»stylesheet»>

La clave es no duplicar parámetros ni mantener URLs antiguas generadas por plugins. En el ejemplo anterior, display=swap aparece una sola vez y la familia Roboto carga únicamente los pesos 400 y 700.

Si usas un plugin o un constructor que inserta Google Fonts automáticamente, revisa sus ajustes. Muchos temas actuales permiten elegir el comportamiento de font-display, desactivar Google Fonts o servirlas localmente, que suele dar más control en proyectos donde el WPO es prioritario.

Cuándo alojar Google Fonts en local

Alojar fuentes en local puede mejorar el control sobre caché, precarga, privacidad y disponibilidad. No siempre mejora la velocidad por sí solo, pero permite decidir exactamente qué archivos se cargan y cómo se declaran.

Esta opción tiene sentido cuando quieres reducir peticiones externas, trabajar con un stack de optimización más fino o evitar que el theme cargue variantes innecesarias. Eso sí, hay que hacerlo bien: descargar formatos web adecuados, declarar pesos reales y mantener un CSS limpio.

Cómo usar preload para fuentes críticas

Otra técnica útil es precargar fuentes críticas con rel=”preload”. Esto indica al navegador que una fuente concreta es importante y debería descargarse antes, especialmente si se usa en texto visible above the fold.

Un ejemplo básico sería:

<link rel=»preload» href=»/assets/Pacifico-Bold.woff2″ as=»font» type=»font/woff2″ crossorigin>

El atributo crossorigin es importante en muchas cargas de fuentes porque estos archivos suelen tratarse como recursos sujetos a CORS. Si falta, el navegador puede duplicar descargas o no reutilizar correctamente el recurso precargado.

Preload no sustituye a font-display. Lo ideal es combinarlo con una declaración @font-face correcta, por ejemplo:

@font-face{ font-family: ‘Pacifico’; src: url(‘/assets/Pacifico-Bold.woff2’) format(‘woff2’); font-weight: 700; font-style: normal; font-display: swap; }

La precarga debe usarse con criterio. Si precargas demasiadas fuentes, puedes competir con recursos más importantes, como el CSS crítico, la imagen principal o scripts necesarios para el renderizado inicial.

Errores frecuentes al corregir font-display swap

El aviso de PageSpeed puede parecer sencillo, pero en WordPress es habitual que reaparezca después de aplicar el cambio. Casi siempre ocurre porque hay más de una fuente implicada o porque el plugin de optimización no está actuando sobre el recurso correcto.

Estos son los errores que más conviene revisar:

• Añadir font-display en una fuente, pero dejar otras variantes sin corregir.
• Usar display=swap en Google Fonts y seguir cargando otra URL antigua sin el parámetro.
• Precargar fuentes que no se usan en el primer pantallazo.
• Cargar demasiados pesos por diseño, cuando con 400 y 700 sería suficiente.
• Usar una fuente fallback muy distinta y provocar cambios de tamaño al cargar la fuente final.
• Confiar solo en un plugin sin comprobar el HTML y el CSS generado.

La solución real no consiste en perseguir una puntuación perfecta, sino en mejorar la carga visible sin romper el diseño. En SEO técnico, priorizar impacto es más importante que tachar avisos sin entender su origen.

Font-display swap, CLS y experiencia visual

font-display: swap permite que el texto se vea antes, pero también puede provocar un pequeño cambio cuando se aplica la fuente final. Esto ocurre si la fuente alternativa y la fuente personalizada tienen alturas, anchuras o espaciados muy diferentes.

Por eso no basta con poner swap y olvidarse. Conviene definir una pila de fuentes coherente, por ejemplo usando una fuente de sistema parecida a la personalizada. Así reduces el salto visual y mantienes una lectura estable.

Un ejemplo de fallback razonable sería:

body { font-family: ‘Roboto’, Arial, Helvetica, sans-serif; }

Si la fuente principal tarda en llegar, el navegador mostrará Arial o Helvetica antes de hacer el cambio. La experiencia será más suave que si el fallback tiene proporciones completamente distintas.

En proyectos donde el CLS es delicado, puede ser interesante probar font-display: optional o ajustar métricas avanzadas de fuente. Para la mayoría de webs, sin embargo, swap con buen fallback suele ofrecer el mejor equilibrio entre lectura inmediata y consistencia visual.

Checklist para corregir el aviso en una web real

Antes de dar el problema por cerrado, merece la pena seguir una revisión ordenada. Esto ayuda a detectar si el aviso viene de una fuente concreta o de una configuración global mal planteada.

1. Analiza la URL en PageSpeed Insights y anota las fuentes afectadas.
2. Comprueba en DevTools si las fuentes vienen de Google Fonts, del theme, de plugins o del servidor propio.
3. Elimina familias y pesos que no se usan en la página.
4. Añade font-display: swap, fallback u optional en cada @font-face.
5. Si usas Google Fonts, añade display=swap en la URL y evita duplicados.
6. Precarga solo las fuentes críticas visibles en el primer pantallazo.
7. Define fallbacks de sistema parecidos para reducir saltos visuales.
8. Limpia caché, regenera CSS si usas constructor visual y repite el test.

Este proceso permite resolver el aviso sin tocar piezas innecesarias. Si después de aplicarlo el diagnóstico persiste, revisa el código fuente final, no solo la configuración del plugin: PageSpeed analiza lo que recibe el navegador.

Cuándo merece la pena pedir ayuda técnica

Aplicar font-display puede ser rápido en una web sencilla, pero se complica cuando hay varios plugins, CSS combinado, fuentes locales, Google Fonts, constructores visuales y cachés en varias capas. En esos casos, un cambio pequeño puede no surtir efecto o incluso romper parte del diseño.

En Rodanet abordamos este tipo de ajustes dentro de auditorías SEO técnicas y trabajos de WPO, especialmente cuando la velocidad afecta a captación, conversión o visibilidad orgánica. Como agencia SEO en Barcelona, no miramos PageSpeed como una nota aislada, sino como una pista para priorizar mejoras que impacten en negocio.

La recomendación final es sencilla: usa font-display para evitar texto invisible, reduce las fuentes a lo necesario y valida siempre el resultado en la URL real. Con una carga tipográfica bien planteada, la web se percibe más rápida, el usuario puede leer antes y el WPO deja de depender de parches puntuales.