Solucionar Ensure text remains visible during webfont load

Asegúrate de que el texto permanezca visible mientras se cargan las fuentes web

Antes de que existieran las fuentes web, los diseñadores web estaban limitados a un pequeño número de fuentes preinstaladas. Las fuentes web te dan la libertad de usar cualquier fuente en un sitio web.

Por supuesto, eso suena bien, pero las fuentes web también tienen sus desventajas; ralentizan la velocidad de carga de la página de varias maneras.

Las fuentes web suelen ser archivos grandes que no están instalados en una computadora de forma predeterminada. Por lo tanto, las fuentes web deben descargarse antes de poder usarse. Mientras se descarga una fuente web, el texto de una página web se ocultará temporalmente hasta que la fuente web se haya cargado por completo. Esto genera una mala UX; nadie quiere mirar una pantalla vacía durante demasiado tiempo.

Tan pronto como la fuente web se carga y se renderiza, el navegador reemplaza el "texto invisible" por el texto final con la nueva fuente web. Este momento se llama Flash de Texto Invisible (FOIT por sus siglas en inglés). Este FOIT es lo que causa que aparezca el mensaje de error "Ensure text remains visible during webfont load".

¿Cargando una fuente web en tu página y no tomando precauciones para prevenir este Flash de Texto Invisible? Mientras analizas el PageSpeed en Lighthouse, aparecerá el siguiente mensaje: "Ensure text remains visible during webfont load". Esto te dice cuánto tiempo podrías ahorrar haciendo que el texto sea visible antes de que se cargue la fuente web. Para una sola fuente, esto es fácilmente 100ms.

¿Por qué el texto invisible es malo para la velocidad de la página?

El texto invisible realmente no ralentizará el tiempo de carga final medido de una página. Entonces, ¿por qué Lighthouse cree que es un problema tan grande?

Google cree que es importante que una página web proporcione la mejor UX posible. La UX puede mejorarse mostrando el contenido de la página lo más rápido posible. El texto invisible afecta directamente a tu First Contentful Paint (FCP) porque el navegador no puede pintar texto que está ocultando. Si el texto es tu elemento de Largest Contentful Paint (LCP), el FOIT también retrasa esa métrica. Compara las dos versiones de tira de película de nuestra página de inicio a continuación:

Flash de Texto Invisible (FOIT)

Sin flash de texto invisible con display:swap

Como puedes ver, las dos páginas terminaron de cargarse exactamente al mismo tiempo. Aún así, la última versión del sitio web se ve mucho mejor para los visitantes. Los visitantes pueden empezar a leer inmediatamente.

Por eso es inteligente mostrar texto de todos modos, no en la fuente final, sino en una fuente "fallback". De esta manera, el visitante piensa que tu página realmente se carga súper rápido.

Un breve recordatorio: FOIT y FOUT

Antes de continuar, es útil distinguir los siguientes conceptos: FOIT y FOUT. FOIT significa Flash de Texto Invisible y ocurre cuando las fuentes web no son visibles durante la carga. Puedes mitigar esto incluyendo una fuente fallback. Cuando la fuente fallback es reemplazada por la fuente web, se llama FOUT, Flash de Texto Sin Estilo.

Haz que las fuentes web sean visibles durante la carga

Hay dos formas de hacer que las fuentes web sean visibles durante la carga: la primera es a través del valor CSS font-display; la segunda es usando una fuente fallback a través de una clase. Ambos métodos tienen ventajas y desventajas, que discutiré a continuación.

Método 1: Font-display:swap

Font-display es un descriptor de CSS que está disponible en todos los navegadores modernos. El descriptor font-display determina cómo se muestra una fuente basándose en si se descargó y cuándo. Font-display se usa en una regla @font-face.

Hay cuatro valores de font-display que debes conocer:

• swap: Muestra la fuente fallback inmediatamente, luego cambia a la fuente web cuando se carga. La ventana de cambio (swap) es infinita, por lo que la fuente web siempre reemplaza a la fallback eventualmente. Es mejor para fuentes de marca y encabezados.
• optional: Muestra la fuente fallback inmediatamente. El navegador decide si cambiar según la velocidad de conexión. Sin cambio significa cero Cumulative Layout Shift. Es mejor para el texto del cuerpo donde el rendimiento es la prioridad.
• fallback: Muestra la fuente fallback inmediatamente, luego le da a la fuente web una ventana corta (~3 segundos) para cargar. Si pierde la ventana, la fallback se queda. Un punto intermedio entre swap y optional.
• block: Oculta el texto hasta por 3 segundos mientras se carga la fuente. Esta es la causa del FOIT. No uses esto a menos que tengas una razón específica (como fuentes de íconos).

Según el Web Almanac 2025, solo el 50% de los sitios usan font-display: swap, mientras que el 25% todavía usa block. Eso significa que una cuarta parte de la web todavía muestra texto invisible durante la carga de fuentes.

Usa el valor swap para evitar el FOIT y hacer que el texto aparezca en la pantalla lo más rápido posible. Una vez que establecemos el valor font-display: swap en la regla @font-face, se usan las fuentes predeterminadas del sistema mientras se carga la página hasta que se hayan cargado las fuentes web. Esto ayuda al visitante a leer el texto en la página de inmediato.

Google Fonts

Cuando usas Google Fonts, puedes usar el método font-display: swap con un simple "&display=swap" en la hoja de estilos o código de inserción.

<!-- a través de una hoja de estilos externa -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<!-- a través del método import (más lento, no recomendado) -->
<style>
 @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
</style>

El método @import bloquea el renderizado y obliga al navegador a descargar las hojas de estilo de forma secuencial. El método <link> es más rápido porque el navegador puede descubrir la hoja de estilos de la fuente antes en el proceso de análisis.

Pero no somos fans de ninguno de los enfoques. Casi siempre es mucho más rápido alojar las fuentes web tú mismo. Te da más control sobre el proceso de "precarga" de las fuentes. Puedes usar la conexión HTTP/2 ya existente y no tienes que descargar una hoja de estilos adicional.

Fuentes locales

@font-face {
 font-family: "Open Sans";
 font-weight: 400;
 font-style: normal;
 src: url("OpenSans400.woff2") format("woff2");
 font-display: swap
}

WOFF2 es todo lo que necesitas. Es compatible en todos los navegadores modernos y ofrece la mejor compresión. Según el Web Almanac 2025, el 72% de los sitios ahora alojan sus fuentes, y WOFF2 representa el 65% de todas las solicitudes de fuentes web. Ya no hay razón para incluir WOFF o TTF como formatos fallback.

Prevenir layout shift al cambiar fuentes

Hay un truco con font-display: swap. Cuando el navegador cambia de la fuente fallback a la fuente web, el texto a menudo cambia de tamaño. Diferentes fuentes tienen diferentes anchos de caracteres, alturas de ascenso y espaciado de líneas. Este cambio de tamaño causa Cumulative Layout Shift (CLS), que es un Core Web Vitals.

La solución es el descriptor de CSS size-adjust. Escala la fuente fallback para coincidir con las dimensiones de tu fuente web, por lo que el cambio causa poco o ningún desplazamiento visible. El soporte del navegador es superior al 93%, incluyendo Safari 17+.

/* Definir una fuente fallback emparejada */
@font-face {
 font-family: "Open Sans Fallback";
 src: local("Arial");
 size-adjust: 105%;
 ascent-override: 110%;
 descent-override: 25%;
 line-gap-override: 0%;
}

/* Usar ambas en tu pila de fuentes */
body {
 font-family: "Open Sans", "Open Sans Fallback", sans-serif;
}

Los descriptores ascent-override, descent-override y line-gap-override dan un control aún más preciso sobre las métricas verticales. Estos funcionan en Chrome, Firefox y Edge, pero aún no en Safari, así que trátalos como una mejora progresiva. La propiedad size-adjust por sí sola ya hace una diferencia notable.

En los sitios monitoreados por CoreDash, las páginas que combinan font-display: swap con anulaciones de métricas de fuentes tienen un 75% menos de CLS relacionado con las fuentes que las páginas que usan solo swap.

Método 2: Fuentes con una clase

La segunda forma de hacer que las fuentes sean visibles durante la carga es trabajar con clases. Estas clases generalmente (pero no siempre) se agregan al elemento <body> o <html>.

La ventaja de este método es que tienes más control sobre la fuente fallback y el momento del Flash de Texto Sin Estilo.

Este método funciona de la siguiente manera: Indica en tu hoja de estilos que una página debe renderizarse inicialmente con una fuente (la fuente fallback). Luego cargas la fuente web a través de la API FontFace de JavaScript o a través de la precarga. Después de que esta fuente se haya cargado, agrega una clase a tu página. La clase asegura que la fuente web se active.

¿Por qué harías eso, podrías preguntar? Haces esto para ganar más control sobre la fuente fallback. Puedes mostrar la fuente fallback con un espaciado de línea más grande o un tamaño diferente para que coincida mejor con la fuente web. Esto previene cambios de diseño.

Al usar múltiples fuentes web, puedes usar el método de la API FontFace para cambiar todas las fuentes a la vez. Esto ahorra muchos repintados del navegador. Personalmente no soy un fan de este método; esto asegura que el FOUT tenga lugar después de que se haya cargado la última fuente. Así que eso siempre es más tarde de lo necesario.

Fuente con una clase a través de la API FontFace:

<style>
  // fuente fallback con un font-size de .9rem
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }

  // fuente web con un font-size de 1rem
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }
</style>

<script>
var font = new FontFace("webfont", "url(/font.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

// ¡no esperes al árbol de renderizado, inicia una búsqueda inmediata!
font.load().then(function() {
  document.fonts.add(font);
  document.documentElement.classList.add("fl")
});
</script>

A través de un enlace de precarga (preload)

El segundo método es a través de un enlace de precarga. Precarga la fuente como se describe a continuación. Una vez que esto esté hecho, cambia la clase del elemento <html>.

<link
  rel="preload"
  href="/webfont.woff2"
  as="font"
  type="font/woff2" crossorigin
  onload="document.documentElement.classList.add('fl')">

<style>
  // fuente fallback con un font-size de .9rem
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }

  // fuente web con un font-size de 1rem
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }

  // @font-face, solo activado una vez que la clase .fl se agrega a la etiqueta html
  @font-face{
    font-family:'Open Sans';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src: url(/webfont.woff2) format("woff2");
    unicode-range:U+000-00FF;
  }
</style>

Consejos y trucos adicionales

1. Siempre precarga fuentes visibles. Las fuentes no se descargan de forma predeterminada hasta que realmente se usan en una página. Si necesitas una fuente web, precárgala para que esté disponible antes.
2. ¿Quieres evitar el FOIT y FOUT por completo? Usa font-display: optional en combinación con la precarga.
3. Alojar las fuentes web tú mismo siempre es más rápido que las fuentes web a través de Google Fonts u otro CDN externo.

¿Quieres verificar que tu estrategia de carga de fuentes realmente mejora la UX real? Usa Real User Monitoring para rastrear tu FCP y CLS antes y después de hacer cambios.