Cómo corregir el salto de diseño de fuentes

¿Qué está pasando?

Hay dos efectos habituales. Con un parpadeo de texto invisible (FOIT), el texto permanece en blanco hasta que llega la fuente. Con un parpadeo de texto sin estilo (FOUT), primero aparece una fuente de respaldo y luego se reemplaza. Si las dos fuentes tienen tamaños distintos, las líneas se recolocan y el contenido se mueve. Ese movimiento cuenta para el Cumulative Layout Shift (CLS), una de las Core Web Vitals de Google.

Elige un valor de font-display

• swap muestra el texto de inmediato y lo reemplaza cuando la fuente está lista. Es la opción más común, pero puede provocar un salto.
• optional usa tu fuente solo si llega muy rápido. Evita un reemplazo tardío, lo que resulta útil para el texto principal en sitios donde la velocidad es prioritaria.
• fallback está entre las dos opciones, con una espera corta y un tiempo limitado para hacer el reemplazo.

Ajusta tu fuente de respaldo

Esta es la solución más eficaz. Creas una fuente de respaldo que usa una fuente del sistema, redimensionada para ocupar más o menos el mismo espacio que tu webfont. Cuando se produce el reemplazo, casi nada se mueve:

@font-face {
  font-family: "Brand Sans Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 96%;
  descent-override: 28%;
  line-gap-override: 0%;
}

body {
  font-family: "Brand Sans", "Brand Sans Fallback", sans-serif;
}

No necesitas calcular estos números a mano. En el Generador de webfonts, abre CSS, elige una Matched fallback font y la herramienta mide tu fuente y escribe la regla por ti.

Otras cosas que ayudan

• Precarga tu fuente principal, para que llegue antes del primer renderizado siempre que sea posible.
• Mantén los archivos de fuente pequeños, como explicamos en nuestra guía sobre cómo cargar webfonts más rápido.
• Evita fuentes de orígenes mixtos. Servir las fuentes desde tu propio dominio elimina una conexión adicional.

Revisa tu puntuación

Ejecuta el Test de velocidad de página y revisa el CLS. Una buena puntuación es 0,1 o menos. Para ver el reemplazo por ti mismo, limita la velocidad de tu conexión en las herramientas de desarrollo del navegador y recarga la página.