cat html-css/google-fonts-e-font-display-swap-per.md

Lezione 56 10 min

Google Fonts e font-display: swap per evitare il FOIT

Perché i testi del tuo sito spariscono per un secondo quando lo carichi? Scopri il Flash of Invisible Text e come risolverlo.

Sia che tu stia importando i font tramite Google Fonts (con un tag <link> nell’HTML), sia che tu li stia ospitando localmente con @font-face, andrai incontro a un problema prestazionale noto come FOIT (Flash Of Invisible Text).

Cos’è il FOIT?

Immagina un utente con una connessione cellulare non velocissima che entra nel tuo sito. Il browser scarica l’HTML e vede che c’è un titolo <h1>. Cerca di scriverlo a schermo, ma legge nel CSS che per farlo deve usare il font “Roboto”.

Il browser non ha “Roboto” in memoria, quindi avvia il download del font. Nel frattempo, cosa fa? Nasconde il testo. L’utente per 1 o 2 secondi vedrà lo schermo bianco (o senza scritte), finché il font non ha finito di scaricarsi. Solo allora il testo “comparirà” magicamente.

Questo è terribile per la User Experience (UX), specialmente se l’utente voleva solo leggere un’informazione veloce.

La soluzione: il FOUT (Flash of Unstyled Text)

È molto meglio mostrare subito all’utente il testo usando un font di sistema standard brutto (come Arial o Times New Roman), e farglielo leggere. Poi, quando il “Roboto” ha finito di scaricarsi in background, il testo cambierà font “scambiandosi” in diretta.

Questo comportamento si chiama FOUT. Il testo è subito leggibile, anche se per una frazione di secondo ha lo stile sbagliato.

Come forzare il FOUT: font-display: swap

Esiste una regola CSS creata appositamente per comandare questo comportamento di caricamento: font-display.

Se ospiti i font localmente, aggiungila dentro la tua regola @font-face:

@font-face {
  font-family: 'IlMioFont';
  src: url('/fonts/MioFont.woff2') format('woff2');
  
  /* MAGIA: Mostra prima il font di sistema di fallback, e fai lo scambio appena pronto! */
  font-display: swap; 
}

E con Google Fonts?

Se continui a usare Google Fonts inserendo il link nell’HTML, noterai che Google ha recentemente iniziato ad aggiungere un parametro automatico alla fine degli URL che ti fornisce: &display=swap.

<!-- Cerca la dicitura &display=swap in fondo all'URL! -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Questo parametro dice ai server di Google di iniettare automaticamente font-display: swap nel CSS che ti inviano. Assicurati sempre di usare swap su qualsiasi font personalizzato tu includa nel tuo progetto!