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 fino a quando il carattere non viene caricato, causando un lampo di testo invisibile (FOIT).

Problemi con il controllo della visualizzazione dei caratteri di Lighthouse

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

Uno screenshot di Lighthouse - Assicurati che il testo rimanga visibile durante il controllo dei caricamenti dei caratteri web

Come evitare di mostrare testo invisibile

L'API font-display indica la modalità di visualizzazione di 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

Esempio di CSS

@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 parametro &display=swap/&display=optional/&display=fallback alla fine dell'URL di Google Fonts:

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

Come evitare le variazioni del layout causate da caratteri differiti

La visualizzazione temporanea di un carattere di sistema sostituirà un FOIT con un lampo di testo senza stile (FOUT). Questo migliora FCP&LCP eseguendo il rendering dei contenuti più rapidamente, ma FOIT e FOUT avranno entrambi lo stesso impatto su CLS quando il carattere personalizzato sostituisce il carattere temporaneo di sistema.

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

Indicazioni specifiche per lo stack

Drupal

Specifica @font-display quando definisci i caratteri personalizzati nel tema.

Magento

Specifica @font-display quando definisci caratteri personalizzati.

Risorse