Proprietà CSS font-display

Il descrittore CSS font-display controlla il comportamento di un web font personalizzato mentre è ancora in fase di download: se il browser mostra immediatamente il testo di fallback, nasconde il testo fino all'arrivo del font, oppure rinuncia del tutto al font. È un descrittore utilizzato all'interno della regola @font-face — non una normale proprietà da applicare a un elemento.

Questa pagina spiega il problema di caricamento che font-display risolve, illustra ognuno dei suoi cinque valori e fornisce consigli pratici su quale scegliere.

Perché esiste font-display

In origine il web era limitato a pochi font "web-safe" installati sul computer dell'utente. La regola @font-face ha cambiato tutto: è possibile includere i propri file di font e indicare al browser dove scaricarli. Tuttavia i file di font possono essere voluminosi e il download richiede tempo. Durante questo ritardo il browser deve decidere cosa visualizzare per il testo in quel font. Esistono due comportamenti in competizione:

FOIT — flash of invisible text. Il browser nasconde il testo fino al termine del download del font personalizzato. Su una connessione lenta l'utente potrebbe trovarsi di fronte a una pagina vuota per diversi secondi. Questo è il comportamento predefinito nella maggior parte dei browser.
FOUT — flash of unstyled text. Il browser mostra immediatamente il testo con un font di fallback, poi lo ridisegna quando il font personalizzato è disponibile. Il contenuto è leggibile all'istante, ma si nota un "salto" visivo al momento dello scambio.

Nessuno dei due è universalmente superiore, quindi font-display consente a te di indicare al browser quale compromesso preferisci.

I tre periodi di font-display

Ogni valore è definito in termini di tre periodi temporali che iniziano quando il font comincia a caricarsi:

Periodo di blocco — il testo viene visualizzato in modo invisibile (occupa comunque spazio). Se il font si carica durante questo periodo, viene utilizzato. Se il periodo termina prima, il browser utilizza un font di sistema.
Periodo di scambio — il testo viene mostrato con un font di fallback, ma il browser lo sostituirà con il font personalizzato non appena il download è completato.
Periodo di fallimento — il browser considera il caricamento del font come fallito e mantiene il font di fallback, anche se il font arriva in seguito.

Ogni valore sceglie semplicemente la durata dei periodi di blocco e di scambio.

Valore iniziale	auto
Si applica a	regola `@font-face`.
Ereditabile	No.
Animabile	No.
Versione	CSS Fonts Module Level 4
Sintassi DOM	object.style.fontDisplay = "swap";

Sintassi

font-display: auto | block | swap | fallback | optional;

Poiché font-display è un descrittore, si trova all'interno di un blocco @font-face insieme a font-family e src:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-display: swap; /* show fallback text immediately, then swap in the font */
}

Il font viene poi utilizzato normalmente. Il descrittore viene letto automaticamente quando il font viene caricato:

body {
  font-family: 'MyWebFont', Arial, sans-serif;
}

Valori

Valore	Periodo di blocco	Periodo di scambio	Cosa vede l'utente
`auto`	predefinito dal browser	predefinito dal browser	Quello che preferisce il browser — di solito si comporta come `block`.
`block`	breve (~3 s)	infinito	Testo invisibile dapprima, poi il font quando arriva (orientato a FOIT).
`swap`	nessuno / minimo	infinito	Testo di fallback immediatamente, sostituito con il font personalizzato al caricamento (FOUT).
`fallback`	molto breve (~100 ms)	breve (~3 s)	Breve testo invisibile, poi fallback; il font viene usato solo se si carica rapidamente.
`optional`	molto breve (~100 ms)	nessuno	Fallback se il font non è già in cache; nessuno scambio con spostamento del layout.

Le durate esatte dei periodi non sono fissate dallo standard — ogni browser sceglie le proprie. I valori riportati sopra sono le impostazioni predefinite comuni utilizzate da Chrome e Firefox.

Quale valore scegliere?

swap è la scelta più diffusa per il testo del corpo. Il contenuto è leggibile immediatamente, il che è ottimo per l'accessibilità e la performance percepita. Lo svantaggio è un reflow visibile quando il font viene sostituito.
optional è la scelta migliore quando evitare lo spostamento del layout è più importante che garantire la visualizzazione del font. Il browser utilizza il font personalizzato solo se riesce a caricarlo quasi istantaneamente (tipicamente dalla cache); altrimenti mantiene il fallback e non effettua mai lo scambio. Questo mantiene basso il punteggio di Cumulative Layout Shift.
fallback è una via di mezzo: una breve finestra invisibile, poi il fallback, con una breve possibilità di scambio. Adatto per font piacevoli ma non critici.
block è indicato per font di icone o font di branding in cui il glifo sbagliato (ad esempio un carattere di fallback invece di un'icona) risulterebbe errato — è preferibile non mostrare nulla piuttosto che mostrare la cosa sbagliata.
auto delega la decisione al browser e non offre alcun controllo, quindi raramente è una scelta deliberata.

font-display è un descrittore, non una proprietà, quindi le parole chiave initial e inherit non si applicano come per le normali proprietà CSS.

Supporto browser

font-display è supportato da tutti i browser moderni (Chrome, Edge, Firefox, Safari e Opera). Nei browser che non riconoscono una determinata parola chiave, il descrittore viene semplicemente ignorato e si applica il comportamento di caricamento predefinito del browser; è quindi sicuro da usare senza un fallback.

Proprietà correlate

@font-face — la regola che definisce un font personalizzato e in cui risiede font-display.
font-family — imposta il font (incluso lo stack di fallback) utilizzato da un elemento.
font-weight — controlla lo spessore del testo.
font — la forma abbreviata di diverse proprietà font contemporaneamente.

Esercitazione

Pratica

Quali sono i possibili valori della proprietà CSS 'font-display'?