Font-display SWAP y asegúrate de que el texto permanece visible mientras se carga la fuente web
Cuando una tipografía tarda en cargarse, el texto puede permanecer invisible para los usuarios, lo que genera una mala experiencia y afecta negativamente el rendimiento visual de la página. Afortunadamente, con la propiedad font-display: swap, podemos corregir esto y asegurarnos de que el texto se muestre de inmediato usando una fuente de respaldo.
Font display
Antes de lanzarnos a aplicar el swap sin saber lo que realmente es, vamos a comprender sobre qué lo aplicamos, es decir, la propiedad font-display. Ésta una propiedad CSS utilizada en las reglas de @font-face que nos permite controlar cómo y cuándo se muestra una fuente web en el navegador mientras se está cargando.
Esta propiedad es particularmente útil para mejorar la experiencia del usuario y el rendimiento de la página, ya que evita el "flash de texto invisible" (FOIT) (un efecto visual donde el texto queda oculto mientras la fuente personalizada no está completamente cargada).
Valores de font-display
Existen cinco valores para font-display, cada uno con un comportamiento específico:
-
auto: Deja que el navegador elija la estrategia de visualización predeterminada. -
block: El texto permanece invisible durante un breve periodo (generalmente 3 segundos). Si la fuente no carga en este tiempo, el navegador muestra una fuente de respaldo hasta que la fuente principal esté lista. -
swap: Muestra el texto inmediatamente usando una fuente de sistema mientras la fuente personalizada termina de cargar, evitando FOIT y mejorando la percepción de velocidad. -
fallback: Similar aswap, pero con un tiempo de espera más corto; si la fuente principal no se carga rápidamente, se usa la fuente de respaldo de manera permanente. -
optional: Similar afallback, pero incluso más estricto, ya que puede optar por no cargar la fuente si la conexión es lenta (explicado en Chrome for Developers por si quieres saber más).
Font display SWAP
Utilizar font-display: swap es la práctica más extendida para optimizar el rendimiento visual y mejorar la experiencia del usuario en términos de accesibilidad y velocidad, ya que permite que el contenido sea visible y legible de inmediato.
3 razones para usar esta configuración
- Evita el FOIT: con
font-display: swap, evitamos el «flash de texto invisible» (FOIT), una situación en la que el texto permanece oculto mientras la fuente principal no está cargada. Esto mejora la velocidad de carga visual de la página y permite que los usuarios accedan al contenido sin retraso. - Mejora la métrica de First Contentful Paint (FCP): al mostrar una fuente de respaldo de inmediato, el contenido textual se vuelve visible más rápidamente, lo cual ayuda a optimizar el First Contentful Paint (FCP), una métrica que mide el tiempo hasta que el contenido inicial de la página aparece en pantalla.
- Reduce el impacto en el CLS: aunque el
swappuede causar un «flash de texto sin estilo» (FOUT), este cambio suele ser menos disruptivo que el FOIT. El CLS (Cumulative Layout Shift) podría verse afectado si la diferencia entre la fuente de respaldo y la fuente principal es grande, pero es preferible a que el texto sea invisible.
Como implementar el font-display: swap
Para implementar swap, podemos recurrir a varias técnicas, que van desde un simple clic con un plugin hasta picar un poquito de código si somos más atrevidos:
- Podemos configurar el font-display swap nativamente con el tema.
- Podemos implementar la función swap con el plugin de Perfmatters.
- Podemos implementar este valor usando la regla @font-face.
- Podemos aplicarlo a través del enlace a Google Fonts.
Vamos a verlo con cada uno de ellos
Implementación de swap con el tema
Una de las formas más cómodas de implementar esta propiedad es directamente si tu tema de WordPress te lo ofrece. Existen algunas plantillas como ASAP o Wasabi que ya te permiten configurar esto desde la personalización del tema.
En el caso de Wasabi, solo tienes que ir a WPO (Rendimiento) > Fuentes y seleccionar la opción de Swap en Font display.
Implementación de swap con plugin WordPress
En el caso de que tu tema no te ofrezca esta opción, puedes recurrir a plugins como Perfmatters que, dentro de todas las opciones para mejorar el WPO de una web, nos permite aplicar esta opción cómodamente.
Para ello, y como ves arriba, solo tienes que ir a tu panel de WordPress > Ajustes > Perfmatters > Fonts y en el panel derecho seleccionar la opción de Display Swap.
A pesar de ser este uno de los mejores plugins de WordPress, tiene el handicap de ser de pago por lo que , si prefieres evitar pasar por caja, puedes recurrir a alguna versión gratuita como Swap Google Fonts Display:
Implementación de swap con CSS
Si prefieres no instalar nada, puedes optar por la opción de configurar este tipo de font display en CSS. Ya mostré esta técnica en el artículo en que explicaba cómo instalar las fuentes en WordPress y realmente es bastante sencillo.
A modo de ejemplo, imagina que quieres cargar la tipografía de Roboto, solo tendrías que indicar dicha fuentes para css e indicar la propiedad font-display: swap;
@font-face {
font-family: 'Roboto';
src: url('/fonts/roboto.woff2') format('woff2');
font-display: swap;
}
Implementación de swap en HTML
Finalmente, vamos a ver como poner una fuente de google fonts en html con la propiedad swap. Y lo cierto es que esto, una vez más, es muy sencillo ya que solo tenemos que añadir la coletilla &display=swap al final de la URL que llama a Google Fonts:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">Y ya que estamos, podríamos meterle un preload para optimizar aún más la carga de la fuente al indicarle al navegador que esta fuente es prioritaria.
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" as="style" crossorigin="anonymous">
Por cierto, el atributo crossorigin="anonymous" se utiliza en la etiqueta <link> cuando queremos cargar fuentes externas y asegurar que la carga se realice sin problemas de seguridad y con buena compatibilidad en distintos navegadores.
Te enseño a auditar tu web con Screaming Frog, para que identifiques y soluciones los problemas que están afectando tu SEO.
¡Comienza mi curso de Screaming Frog gratis hoy!
Mensaje: asegúrate de que el texto permanece visible mientras se carga la fuente web
El mensaje "asegúrate de que el texto permanece visible mientras se carga la fuente web" es una advertencia de rendimiento que nos muestra GooglePage Speed para advertirnos de que la fuente web en uso está retrasando la visibilidad del texto, afectando la experiencia del usuario.
Esto sucede cuando el navegador espera a que la fuente personalizada se cargue por completo antes de mostrar el texto, produciendo el efecto ya comentado y llamado "flash de texto invisible" (FOIT), donde el contenido queda oculto momentáneamente
Para resolver esto ¡oh sopresa! tienes que usar font-display: swap en la definición de la fuente. Este ajuste le indica al navegador que muestre el texto de inmediato con una fuente del sistema mientras la fuente personalizada termina de descargarse. Así, el usuario puede ver el contenido sin demora, y una vez que la fuente personalizada está lista, el navegador hace la transición automática. Este método:
Si has llegado hasta aquí… ¡Apúntate a mi Newsletter y sigue aprendiendo cada semana sobre SEO!