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 al caricamento del carattere, provocando un lampo di testo invisibile (FOIT).

Come viene visualizzato il controllo di Lighthouse relativo alla visualizzazione dei caratteri

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

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

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

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 variazioni di layout causate dai caratteri differiti

La visualizzazione temporanea di un carattere di sistema sostituirà un FOIT con un lampo di testo senza stile (FOUT). In questo modo, il rendering dei contenuti viene eseguito prima, migliorando il FCP e il LCP, ma FOIT e FOUT avranno lo stesso impatto sul CLS quando il carattere personalizzato sostituisce il carattere di sistema temporaneo.

L'impatto del caricamento dei caratteri sul CLS può essere mitigato utilizzando i precaricamenti in combinazione con font-display: optional. Tuttavia, l'uso eccessivo dei precarichi può influire negativamente sulle metriche di caricamento. Ti consigliamo di eseguire test A/B per assicurarti che il precaricamento dei caratteri non introduca alcuna regressione 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