Assicurati che il testo rimanga visibile durante il caricamento dei caratteri web

I caratteri sono spesso file di grandi dimensioni con tempi di caricamento lenti. Alcuni browser nascondono il testo finché il carattere non viene caricato, causando un flash di testo invisibile (FOIT).

Come non supera il controllo font-display di Lighthouse

Lighthouse segnala tutti gli URL dei caratteri che potrebbero mostrare testo invisibile:

Uno screenshot del controllo Lighthouse Assicurati che il testo rimanga visibile durante il caricamento dei caratteri web

Come evitare di mostrare testo invisibile

L'API font-display indica come viene visualizzato un carattere quando viene utilizzato all'interno di uno stile font-face. I seguenti valori font-display indicano al browser di utilizzare un carattere di sistema se il carattere personalizzato non è pronto:

  • swap
  • optional
  • fallback

CSS di esempio

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

Esempio di Google Fonts

Aggiungi il &display=swap/&display=optional/&display=fallback parametro alla fine dell'URL di Google Fonts:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

Come evitare variazioni di layout causate da caratteri differiti

La visualizzazione temporanea di un carattere di sistema sostituirà un FOIT con un lampo di testo senza stile (FOUT). In questo modo, FCP e LCP migliorano grazie al rendering dei contenuti in tempi più brevi, ma FOIT e FOUT avranno lo stesso impatto su CLS quando il carattere personalizzato sostituisce il carattere di sistema temporaneo.

L'impatto del caricamento dei caratteri sul CLS può essere ridotto utilizzando i precaricamenti in combinazione con font-display: optional. Tuttavia, l'uso eccessivo dei precaricamenti può influire negativamente sulle metriche di caricamento. Ti consigliamo di eseguire test A/B per assicurarti che il precaricamento dei caratteri non introduca regressioni delle prestazioni.

Indicazioni specifiche per lo stack

Drupal

Specifica @font-display durante la definizione dei caratteri personalizzati per il tuo tema.

Magento

Specifica @font-display quando definisci caratteri personalizzati.

Risorse