Las fuentes de Google más rápidas

Cuando usas font-display: swap;, lo que hace Google Fonts cuando usas la display=swapparte predeterminada de la URL , ya estás diciendo “Estoy bien con FOUT “, que es otra forma de decir que el texto web se muestra de inmediato, y cuando la web La fuente está lista , “cámbiala”.

Ya existe una naturaleza asincrónica en lo que estás haciendo, por lo que también puedes extender esa asincronía al resto de la carga de fuentes. Harry Roberts:

Si va a utilizar font-displayGoogle Fonts, entonces tiene sentido cargar de forma asincrónica toda la cadena de solicitudes.

Fragmento recomendado por Harry:

link rel="preconnect"      href="https://fonts.gstatic.com"      crossorigin /link rel="preload"      as="style"      href="$CSSdisplay=swap" /link rel="stylesheet"      href="$CSSdisplay=swap"      media="print" onload="this.media='all'" /

$CSSes la parte principal de la URL que te proporciona Google Fonts.

Parece un ahorro de ~20% en tiempo de renderizado sin cambios en cómo se ve o se siente al cargar. Aparte de eso, es más rápido.

Enlace directo →