Cuando ejecuta un sitio en PageSpeed Insights, uno de los diagnósticos habituales es «Ensure text remains visible during webfont load». El problema le resulta familiar a cualquiera que haya instalado Elementor, Astra o conectado Google Fonts: mientras el navegador descarga el archivo de la fuente, el texto en la página simplemente está ausente. Una pantalla en blanco en lugar de un encabezado, fracciones de segundo de vacío y el visitante ya se ha ido.

Técnicamente, esto se llama FOIT (Flash of Invisible Text). La raíz del problema está en la directiva font-display que el navegador usa por defecto. Sin especificar explícitamente font-display: swap, el navegador espera a que la fuente cargue y no muestra el texto hasta que recibe el archivo. Y si la fuente carga desde un CDN a través de un dominio de terceros, la demora se acumula y PageSpeed Insights marca una advertencia.

Esto se resuelve con dos cosas: primero, cada @font-face necesita que se le agregue font-display: swap, para que el navegador muestre inmediatamente el texto con una fuente del sistema y la «intercambie» por la personalizada cuando cargue. Segundo, las fuentes críticamente importantes (la que se usa para el encabezado en la primera pantalla) deben precargarse mediante <link rel="preload">. A continuación, un desglose paso a paso de cómo hacer esto en WordPress, considerando plugins como Elementor y temas como Astra.

💡 Resumen rápido:

• Abra el informe de PageSpeed Insights y anote las fuentes problemáticas del diagnóstico
• Desactive los estilos del plugin y del tema mediante wp_dequeue_style en functions.php
• Copie los archivos de fuentes a una carpeta local y recree font-face con font-display: swap
• Agregue precarga para una o dos fuentes de la primera pantalla
• Para fuentes personalizadas de Elementor, cambie la ruta a local y reconstruya el CSS

Paso 1: encuentre las fuentes problemáticas en el informe

Ejecute una auditoría en PageSpeed Insights, espere el resultado y busque la sección de diagnósticos. Buscamos el elemento «Ensure text remains visible during webfont load».

Expanda la lista para ver las URL de fuentes específicas que carecen de font-display: swap. Generalmente son:

• fontawesome-webfont.woff2, Font Awesome de Elementor;
• eicons.woff2, la fuente de iconos de Elementor;
• Google Fonts (Open Sans, Roboto, Montserrat), si el tema las obtiene mediante CDN.

Anote los nombres de los archivos; los necesitará para los pasos siguientes. Lo principal ahora es entender qué plugin o tema es responsable de cada fuente. Font Awesome y eicons provienen de Elementor. Google Fonts suelen ser conectadas por el tema; en Astra, este es el hook astra-google-fonts.

Paso 2: desactive los estilos que cargan fuentes

Ahora la tarea es eliminar la conexión estándar de estas fuentes para luego poder recuperarlas con la configuración correcta. Vaya al functions.php del tema hijo (o a un plugin de código como Code Snippets) y agregue:

1
/**
2
 * Disable styles that load problematic fonts
3
 */
4
function sdstudio_dequeue_font_styles()
5
{
6
    // Astra — Google Fonts
7
    wp_dequeue_style('astra-google-fonts');
8
    wp_deregister_style('astra-google-fonts');
9
 
10
    // Elementor — Font Awesome 4
11
    wp_dequeue_style('font-awesome');
12
    wp_deregister_style('font-awesome');
13
 
14
    // Elementor — eicons
15
    wp_dequeue_style('elementor-icons');
16
    wp_deregister_style('elementor-icons');
17
}
18
add_action('wp_enqueue_scripts', 'sdstudio_dequeue_font_styles', 9999);
19
add_action('wp_head', 'sdstudio_dequeue_font_styles', 9999);

La prioridad 9999 es importante: el hook debe ejecutarse DESPUÉS de que los plugins y el tema hayan registrado sus estilos. Si la fuente sigue cargando, verifique si otro plugin la está llamando (por ejemplo, un menú o formulario de contacto puede conectar su propia versión de Font Awesome). Busque en los archivos del plugin la cadena wp_enqueue_style con el handle correspondiente.

Después de agregar el código, el icono de Font Awesome en el sitio desaparecerá temporalmente; esto es normal. Lo recuperaremos en el paso 4.

Paso 3: copie los archivos de fuentes a una carpeta local

Cuando una fuente se conecta mediante CDN o a través de un plugin, el navegador realiza una solicitud DNS adicional a un dominio de terceros. El alojamiento local de fuentes elimina esta demora. El algoritmo:

• Encuentre los archivos de fuentes en la estructura del plugin. Para Font Awesome de Elementor, la ruta será: /wp-content/plugins/elementor/assets/lib/font-awesome/fonts/. Para eicons: /wp-content/plugins/elementor/assets/lib/eicons/fonts/. Para Google Fonts, descargue los .woff2 del CDN de Google Fonts.

• Cree una carpeta /wp-content/fonts/ en la raíz del sitio y copie allí todos los archivos necesarios. El formato .woff2 (navegadores modernos) y .woff (alternativa para los más antiguos) son suficientes.

• Si la fuente fue conectada por el tema mediante el CDN de Google Fonts, descargue el .woff2 actual manualmente a través de un enlace directo o usando el plugin OMGF (más sobre esto abajo).

Ahora cada fuente tiene una ruta local como /wp-content/fonts/fontawesome-webfont.woff2. Pasemos a la parte más importante: conectarlas.

Paso 4: conecte las fuentes con font-display: swap y precarga

Los estilos están desactivados, los archivos están en su lugar. Ahora definimos @font-face con la directiva correcta font-display: swap y agregamos preload para una carga instantánea. Coloque el código en functions.php mediante el hook wp_head:

1
/**
2
 * Load fonts locally with font-display: swap and preload
3
 */
4
function sdstudio_inject_font_preload()
5
{
6
    ?>
7
    <!-- Preload critical fonts -->
8
    <link rel="preload" href="/wp-content/fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
9
    <link rel="preload" href="/wp-content/fonts/eicons.woff2" as="font" type="font/woff2" crossorigin="anonymous">
10
 
11
    <style>
12
        /* Font Awesome — icon font */
13
        @font-face {
14
            font-family: 'FontAwesome';
15
            font-display: swap;
16
            font-style: normal;
17
            font-weight: normal;
18
            src: url('/wp-content/fonts/fontawesome-webfont.woff2') format('woff2'),
19
                 url('/wp-content/fonts/fontawesome-webfont.woff') format('woff');
20
        }
21
 
22
        /* eicons — Elementor icons */
23
        @font-face {
24
            font-family: 'eicons';
25
            font-display: swap;
26
            font-style: normal;
27
            font-weight: normal;
28
            src: url('/wp-content/fonts/eicons.woff2') format('woff2'),
29
                 url('/wp-content/fonts/eicons.woff') format('woff');
30
        }
31
    </style>
32
    <?php
33
}
34
add_action('wp_head', 'sdstudio_inject_font_preload', 5);

La prioridad 5 en wp_head significa que las etiquetas de precarga aparecerán en el <head> entre las primeras, por lo que el navegador comenzará a descargar la fuente antes de llegar al CSS. El atributo crossorigin="anonymous" es obligatorio para la precarga de fuentes: sin él, el navegador ignorará la precarga y descargará el archivo de nuevo.

Un matiz importante: la URL dentro de @font-face no debe tener parámetros de consulta como ?#iefix o ?v=4.7.0. PageSpeed Insights tropieza con ellos durante el análisis. El enlace debe estar limpio: /wp-content/fonts/fontawesome-webfont.woff2, y nada más.

Después de agregar el código, limpie la caché (plugin de caché + Cloudflare, si lo usa) y vuelva a ejecutar PageSpeed Insights. La advertencia de fuentes debería desaparecer. Los iconos de Font Awesome regresan a sus lugares, pero ahora no bloquean la visualización del texto.

Paso 5: fuentes personalizadas de Elementor, un caso especial

Si usa Elementor Pro con la función «Custom Fonts», la lógica es la misma, pero hay dos pasos adicionales.

Primero, cambie la ruta de la fuente en la configuración de Elementor. Vaya a Elementor → Custom Fonts, abra la fuente deseada y en el campo URL especifique la ruta local /wp-content/fonts/your-font.woff2 en lugar de un enlace externo a CDN o Google Fonts:

Segundo, reconstruya el CSS de Elementor. Después de cambiar la ruta, vaya a Elementor → Tools → Regenerate CSS y haga clic en el botón de regeneración. Esto obligará a Elementor a reconstruir los archivos de estilo con las nuevas rutas de fuentes:

Después de la regeneración, verifique que la ruta de la fuente en el HTML de la página apunte al archivo local, no al CDN. Luego, en header.php (o mediante wp_head como en el paso 4) agregue la precarga para esta fuente:

1
<link rel="preload" href="/wp-content/fonts/FuturaBookC.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Y el correspondiente @font-face con font-display: swap:

1
@font-face {
2
    font-family: 'FuturaBookC';
3
    font-display: swap;
4
    font-style: normal;
5
    font-weight: normal;
6
    src: url('/wp-content/fonts/FuturaBookC.woff2') format('woff2'),
7
         url('/wp-content/fonts/FuturaBookC.woff') format('woff');
8
}

Camino alternativo: plugins para optimización automática

El método manual otorga control total pero requiere atención al actualizar plugins (una actualización de Elementor puede restaurar la conexión estándar de fuentes). Si desea automatizar el proceso, aquí tiene dos plugins que resuelven la tarea sin editar código.

OMGF (Optimize My Google Fonts). Un plugin gratuito que escanea todas las Google Fonts del sitio, las descarga localmente y agrega font-display: swap automáticamente. Instálelo, haga clic en «Optimize» y todas las Google Fonts de su tema se vuelven locales con los encabezados correctos. La versión Pro puede trabajar con Adobe Fonts y cualquier fuente de CDN de terceros.

Swap Google Fonts Display. Un plugin minimalista que hace exactamente una cosa: agrega font-display: swap a todas las Google Fonts sobre la marcha. No descarga localmente pero elimina la advertencia de PageSpeed Insights en 10 segundos de instalación. Adecuado como solución temporal o si el alojamiento local de fuentes no es crítico.

Los plugins ahorran tiempo, pero recuerde: solo funcionan con Google Fonts. Las fuentes de iconos (Font Awesome, eicons) y las fuentes personalizadas de Elementor no se tocan; igual necesitará realizar los pasos manuales 1-5.

⁉️🤔 Preguntas frecuentes

¿Necesito precargar TODAS las fuentes del sitio?

No. <link rel="preload"> tiene sentido solo para una o dos fuentes que aparecen en la primera pantalla, por ejemplo, la fuente del encabezado H1 y la fuente del texto principal. Precargar una docena de fuentes tendrá el efecto contrario: el navegador gastará ancho de banda en archivos que no se necesitan ahora mismo y ralentizará la carga del contenido crítico. Precargue solo las fuentes usadas en la primera ventana gráfica. Para un blog típico, esto es una fuente de encabezado y una de texto, en total dos archivos woff2. Precargar una fuente de iconos vale la pena solo si un icono aparece en la primera pantalla (menú, búsqueda). Todo lo demás cargará a medida que se desplace sin perjudicar las métricas de PageSpeed.

¿Qué pasa si el sitio se «rompe» después de desactivar los estilos?

El escenario más común: desactivó elementor-icons y las flechas del deslizador o el icono de búsqueda desaparecieron. La solución es verificar qué elementos específicos usan la fuente antes de desactivar. Abra DevTools (F12), pestaña Elements, encuentre el icono y mire la clase CSS. Si la clase comienza con fa-, es Font Awesome. Si con eicon-, es eicons. Desactive solo lo que realmente se usa y conecte localmente los mismos archivos; visualmente nada cambiará. El sitio se «rompe» en dos casos: o desactivó un estilo que, además de la fuente, contenía reglas CSS (raro pero sucede con temas como Astra), o no reconectó la fuente localmente. En el primer caso, extraiga las reglas CSS del archivo desactivado y cópielas en su bloque wp_head. En el segundo caso, simplemente agregue el @font-face faltante.

¿Funciona este método para cualquier tema de WordPress?

Sí, con salvedades. El principio dequeue style → local fonts → font-display: swap → preload es universal. Solo cambian los handles de estilo: para Astra es astra-google-fonts, para GeneratePress es generate-fonts, para OceanWP es oceanwp-google-fonts. Para encontrar el handle de su tema, abra el código fuente de la página (Ctrl+U), busque <link rel="stylesheet" con la fuente y mire el id de la etiqueta; ese es el handle. Luego sustitúyalo en wp_dequeue_style. Los temas modernos (2024-2026) agregan cada vez más font-display: swap de fábrica: Twenty Twenty-Five y los temas de bloque basados en theme.json ya tienen esta configuración. Antes de editar código, verifique si su tema ya hace todo correctamente y la advertencia es causada solo por una fuente de iconos de un plugin aparte.

¿Es obligatorio copiar las fuentes localmente?

Técnicamente, no. font-display: swap funciona también con fuentes conectadas mediante CDN (Google Fonts, cdnjs). Pero el alojamiento local proporciona dos ventajas: primero, elimina una solicitud DNS adicional a un dominio de terceros (ahorrando 50-200 ms), y segundo, no depende de la disponibilidad del CDN. Si Google Fonts se cae, su sitio permanecerá con texto legible. Para un sitio en producción, el alojamiento local es la mejor práctica; para un proyecto personal, es opcional. Excepción: fuentes de iconos. Font Awesome, eicons y dashicons cargan desde el plugin (localmente por definición); copiarlas a la carpeta raíz solo es necesario para «interceptar» el control de carga después del dequeue. El archivo en sí ya está físicamente en el servidor.

Qué hacer con la advertencia de fuentes: el algoritmo final

Siga los cinco pasos de esta guía y la advertencia «Ensure text remains visible during webfont load» desaparecerá del informe de PageSpeed Insights. En resumen: desactive la conexión estándar → coloque las fuentes localmente → recupérelas con font-display: swap → precargue los woff2 críticos → para Elementor, adicionalmente cambie la ruta y reconstruya el CSS. Como resultado, el texto en el sitio es visible instantáneamente, las métricas LCP y FCP mejoran y el visitante no ve una página que «salta».

Si no quiere profundizar en el código, comience con el plugin OMGF para Google Fonts. Para las fuentes de iconos, no existe una «píldora mágica» en forma de plugin; igual tendrá que procesarlas manualmente, pero son 20 minutos de trabajo que se compensan con puntuaciones más altas en PageSpeed y mejoras reales en la velocidad de carga. Pruébelo y haga pruebas después de cada cambio; solo una auditoría repetida mostrará que el problema está realmente resuelto.