Risolvi Ensure text remains visible during webfont load

Assicurati che il testo rimanga visibile durante il caricamento dei webfont

Prima dell'esistenza dei webfont, i web designer erano limitati a un piccolo numero di font preinstallati. I webfont ti danno la libertà di utilizzare qualsiasi font su un sito web.

Certo, sembra bello, ma i webfont hanno anche i loro svantaggi; rallentano la velocità di caricamento della pagina in diversi modi.

I webfont sono in genere file di grandi dimensioni che non sono installati su un computer per impostazione predefinita. Quindi i webfont devono essere scaricati prima di poter essere utilizzati. Durante il download di un webfont, il testo su una pagina web verrà temporaneamente nascosto fino a quando il webfont non sarà stato caricato completamente. Ciò comporta una scarsa user experience; nessuno vuole fissare uno schermo vuoto per troppo tempo.

Non appena il webfont viene caricato e renderizzato, il browser sostituisce il "testo invisibile" per il testo finale con il nuovo webfont. Questo momento è chiamato Flash of Invisible Text (FOIT). Questo FOIT è ciò che causa la comparsa del messaggio di errore "Ensure text remains visible during webfont load".

Stai caricando un webfont sulla tua pagina e non prendi alcuna precauzione per prevenire questo Flash of Invisible Text? Mentre analizzi PageSpeed su Lighthouse, apparirà il seguente messaggio: "Ensure text remains visible during webfont load". Questo ti dice quanto tempo potresti risparmiare rendendo visibile il testo prima che il webfont venga caricato. Per 1 singolo font, si tratta facilmente di 100 ms.

Perché il testo invisibile è dannoso per la velocità della pagina?

Il testo invisibile non rallenterà realmente il tempo di caricamento finale misurato di una pagina. Allora perché Lighthouse pensa che sia un problema così grande?

Google ritiene che sia importante che una pagina web fornisca la migliore user experience possibile. La user experience può essere migliorata mostrando i contenuti sulla pagina il più velocemente possibile. Il testo invisibile influisce direttamente sul tuo First Contentful Paint (FCP) perché il browser non può renderizzare il testo che sta nascondendo. Se il testo è il tuo elemento Largest Contentful Paint (LCP), il FOIT ritarda anche quella metrica. Confronta le due versioni filmstrip della nostra homepage di seguito:

Flash of Invisible Text

Nessun flash di testo invisibile con display:swap

Come puoi vedere, le due pagine hanno finito di caricarsi esattamente nello stesso momento. Tuttavia, l'ultima versione del sito web ha un aspetto molto migliore per i visitatori. I visitatori possono iniziare a leggere immediatamente.

Ecco perché è intelligente mostrare comunque il testo, non nel font finale, ma in un font di "fallback". In questo modo il visitatore pensa che la tua pagina si carichi davvero in modo super veloce.

Un breve promemoria: FOIT e FOUT

Prima di procedere oltre, è utile distinguere i seguenti concetti: FOIT e FOUT. FOIT sta per Flash of Invisible Text e si verifica quando i webfont non sono visibili durante il caricamento. Puoi mitigarlo includendo un font di fallback. Quando il font di fallback viene sostituito dal webfont, si chiama FOUT, Flash of Unstyled Text.

Rendi visibili i webfont durante il caricamento

Ci sono due modi per rendere visibili i webfont durante il caricamento: il primo è tramite il valore CSS font-display; il secondo è utilizzando un font di fallback tramite una classe. Entrambi i metodi hanno vantaggi e svantaggi, che discuterò di seguito.

Metodo 1: Font-display:swap

Font-display è un descrittore CSS disponibile in tutti i browser moderni. Il descrittore font-display determina come viene visualizzato un font in base a se e quando è stato scaricato. Font-display viene utilizzato in una regola @font-face.

Ci sono quattro valori di font-display che dovresti conoscere:

• swap: Mostra immediatamente il font di fallback, quindi passa al webfont quando viene caricato. La finestra di swap è infinita, quindi il webfont sostituisce sempre il fallback alla fine. Ottimo per i font del brand e le intestazioni.
• optional: Mostra immediatamente il font di fallback. Il browser decide se effettuare lo swap in base alla velocità della connessione. Nessuno swap significa zero layout shift. Ottimo per il testo del corpo dove le prestazioni sono la priorità.
• fallback: Mostra immediatamente il font di fallback, quindi concede al webfont una breve finestra (~3 secondi) per il caricamento. Se manca la finestra, il fallback rimane. Una via di mezzo tra swap e optional.
• block: Nasconde il testo fino a 3 secondi mentre il font viene caricato. Questa è la causa del FOIT. Non utilizzarlo a meno che tu non abbia un motivo specifico (come i font di icone).

Secondo il Web Almanac 2025, solo il 50% dei siti utilizza font-display: swap, mentre il 25% utilizza ancora block. Ciò significa che un quarto del web mostra ancora testo invisibile durante il caricamento dei font.

Utilizza il valore swap per evitare il FOIT e far apparire il testo sullo schermo il più velocemente possibile. Una volta impostato il valore font-display: swap nella regola @font-face, i font predefiniti del sistema vengono utilizzati durante il caricamento della pagina fino al caricamento dei webfont. Ciò aiuta il visitatore a leggere immediatamente il testo sulla pagina.

Google Fonts

Quando utilizzi Google Fonts, puoi usare il metodo font-display: swap con un semplice "&display=swap" nel foglio di stile o nel codice da incorporare.

<!-- tramite un foglio di stile esterno -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<!-- tramite il metodo import (più lento, non raccomandato) -->
<style>
 @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
</style>

Il metodo @import è render-blocking e costringe il browser a scaricare i fogli di stile in modo sequenziale. Il metodo <link> è più veloce perché il browser può scoprire il foglio di stile del font prima nel processo di parsing.

Ma non siamo fan di nessuno dei due approcci. È quasi sempre molto più veloce ospitare i webfont da soli. Ti dà un maggiore controllo sul processo di "preloading" dei font. Puoi utilizzare la connessione HTTP/2 già esistente e non devi scaricare un foglio di stile extra.

Font locali

@font-face {
 font-family: "Open Sans";
 font-weight: 400;
 font-style: normal;
 src: url("OpenSans400.woff2") format("woff2");
 font-display: swap
}

WOFF2 è tutto ciò di cui hai bisogno. È supportato in tutti i browser moderni e offre la migliore compressione. Secondo il Web Almanac 2025, il 72% dei siti ora ospita i propri font e WOFF2 rappresenta il 65% di tutte le richieste di web font. Non c'è più alcun motivo per includere WOFF o TTF come formati di fallback.

Previeni i layout shift durante lo swap dei font

C'è un problema con font-display: swap. Quando il browser passa dal font di fallback al webfont, il testo cambia spesso dimensione. Font diversi hanno diverse larghezze dei caratteri, altezze di ascesa (ascent) e interlinee. Questa modifica delle dimensioni causa un Cumulative Layout Shift (CLS), che è un Core Web Vital.

La soluzione è il descrittore CSS size-adjust. Ridimensiona il font di fallback per farlo corrispondere alle dimensioni del tuo webfont, in modo che lo swap causi poco o nessun shift visibile. Il supporto dei browser è superiore al 93%, incluso Safari 17+.

/* Definisci un font di fallback corrispondente */
@font-face {
 font-family: "Open Sans Fallback";
 src: local("Arial");
 size-adjust: 105%;
 ascent-override: 110%;
 descent-override: 25%;
 line-gap-override: 0%;
}

/* Usa entrambi nel tuo font stack */
body {
 font-family: "Open Sans", "Open Sans Fallback", sans-serif;
}

I descrittori ascent-override, descent-override e line-gap-override offrono un controllo ancora più preciso sulle metriche verticali. Funzionano in Chrome, Firefox ed Edge ma non ancora in Safari, quindi trattali come un progressive enhancement. La proprietà size-adjust da sola fa già una notevole differenza.

Nei siti monitorati da CoreDash, le pagine che combinano font-display: swap con gli override delle metriche dei font hanno il 75% in meno di CLS correlato ai font rispetto alle pagine che utilizzano solo swap.

Metodo 2: Font con una classe

Il secondo modo per rendere visibili i font durante il caricamento è lavorare con le classi. Queste classi vengono solitamente (ma non sempre) aggiunte all'elemento <body> o <html>.

Il vantaggio di questo metodo è che hai un maggiore controllo sul font di fallback e sul tempismo del Flash of Unstyled Text.

Questo metodo funziona come segue: indica nel tuo foglio di stile che una pagina dovrebbe essere inizialmente renderizzata con un font (il font di fallback). Carica quindi il webfont tramite la FontFace API di JavaScript o tramite preloading. Dopo che questo font è stato caricato, aggiungi una classe alla tua pagina. La classe assicura che il webfont venga attivato.

Perché dovresti farlo, ti chiederai? Lo fai per ottenere un maggiore controllo sul font di fallback. Puoi mostrare il font di fallback con un'interlinea maggiore o una dimensione diversa in modo che corrisponda meglio al webfont. Questo previene i layout shift.

Quando utilizzi più webfont, puoi usare il metodo della FontFace API per cambiare tutti i font contemporaneamente. Questo consente di risparmiare molti repaint del browser. Personalmente non sono un fan di questo metodo; assicura che il FOUT abbia luogo dopo che è stato caricato l'ultimo font. Quindi è sempre più tardi del necessario.

Font con una classe tramite la FontFace API:

<style>
  // font di fallback con un font-size di .9rem
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }

  // webfont con un font-size di 1rem
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }
</style>

<script>
var font = new FontFace("webfont", "url(/font.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

// non aspettare il render tree, avvia un fetch immediato!
font.load().then(function() {
  document.fonts.add(font);
  document.documentElement.classList.add("fl")
});
</script>

Tramite un link di preload

Il secondo metodo è tramite un link di preload. Esegui il preload del font come descritto di seguito. Una volta fatto ciò, cambia la classe dell'elemento <html>.

<link
  rel="preload"
  href="/webfont.woff2"
  as="font"
  type="font/woff2" crossorigin
  onload="document.documentElement.classList.add('fl')">

<style>
  // font di fallback con un font-size di .9rem
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }

  // webfont con un font-size di 1rem
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }

  // @font-face, attivato solo una volta che la classe .fl viene aggiunta al tag html
  @font-face{
    font-family:'Open Sans';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src: url(/webfont.woff2) format("woff2");
    unicode-range:U+000-00FF;
  }
</style>

Suggerimenti e trucchi extra

1. Effettua sempre il preload dei font visibili. I font non vengono scaricati per impostazione predefinita fino a quando non vengono effettivamente utilizzati in una pagina. Se hai bisogno di un webfont, effettuane il preload in modo che sia disponibile prima.
2. Vuoi evitare del tutto il FOIT e il FOUT? Usa font-display: optional in combinazione con il preloading.
3. Ospitare i webfont da soli è sempre più veloce dei webfont tramite Google Fonts o un'altra CDN esterna.

Vuoi verificare che la tua strategia di caricamento dei font migliori effettivamente la reale user experience? Usa il Real User Monitoring per tracciare il tuo FCP e CLS prima e dopo aver apportato modifiche.