Caricamento dei web font: font-display, preload e subsetting
Caricamento dei web font
Caricamento dei web font: font-display, preload, subsetting | We.Inc
Scopri cosa fa ogni valore di font-display con un simulatore della timeline, poi usa preload, preconnect, subset con unicode-range e metriche di fallback allineate per evitare il layout shift.
Caricare i font velocemente si riduce a quattro mosse: segnala presto il font al browser (preconnect o preload), invia piccoli file WOFF2 che contengono solo i caratteri che ti servono, scegli un valore di font-display adatto al testo e dimensiona il font di fallback in modo che coincida, così niente salta. Usa font-display: optional quando evitare il layout shift è la priorità.
I valori di font-display in sintesi
Valore
Testo durante il caricamento
Se il font arriva tardi
Ideale per
Fallback quasi immediato
Viene sempre sostituito
Testo del corpo che deve comparire subito
Fallback quasi immediato
Non viene sostituito; resta il fallback
Layout shift minimo
Fallback quasi immediato
Sostituito solo entro circa 3s
Una via di mezzo
Invisibile fino a circa 3s
Viene sempre sostituito
Icon font, loghi composti in testo
Decide il browser
Decide il browser
Lasciare la scelta al browser
I font sono tra le poche risorse che possono nascondere il testo o spostare il layout. Trascina il cursore qui sotto per impostare quanto tempo impiega un font ad arrivare e guarda cosa mostra ogni valore di font-display in ogni istante, poi copia gli schemi di caricamento che mantengono stabili le pagine.
Imposta il cursore sul tempo che il tuo font impiega a scaricarsi con una connessione lenta.
Leggi ogni riga: il grigio è testo invisibile, l'ambra è il font di fallback, il blu è il web font.
Nota quali valori cambiano font in ritardo. Un cambio tardivo è il momento in cui il testo visibile si ricompone.
Copia gli snippet per preload, subset con unicode-range e fallback regolati.
Font in self-hosting: inserisci le regole @font-face inline nella head, così il browser le trova senza attendere un altro foglio di stile.
Fai il preload solo di uno o due file critici. Il preload di ogni peso compete con immagini e script.
Aggiungi sempre crossorigin al preload di un font, anche per i file sul tuo dominio, altrimenti il browser scarica il file due volte.
Servi WOFF2. Comprime meglio di WOFF e tutti i browser attuali lo leggono.
Metti sempre una famiglia generica sensata alla fine di ogni elenco font-family, così il testo viene mostrato anche se il download fallisce.
Domande frequenti
Cosa fa font-display: swap?
Assegna al font un block period estremamente breve, che la specifica CSS Fonts consiglia di tenere a 100ms o meno, e uno swap period infinito. Il testo appare quasi subito nel font di fallback e passa al web font non appena questo finisce di caricarsi.
font-display: swap peggiora il CLS?
Può succedere. Se il fallback e il web font hanno larghezze o interlinee diverse, il cambio tardivo sposta il testo e il contenuto sottostante. Risolvi con size-adjust e gli override di ascent, descent e line-gap sul fallback, oppure usa optional.
Perché il mio font con preload viene scaricato due volte?
I font vengono richiesti in modalità CORS anonima, quindi il link di preload ha bisogno dell'attributo crossorigin anche quando il file è sulla stessa origine. Senza di esso il preload non corrisponde alla richiesta reale e il font viene scaricato di nuovo.
Devo fare il preload dei Google Fonts?
Di solito no. web.dev avverte che il preload aggira parte della negoziazione dei contenuti del browser, compreso unicode-range, quindi potresti scaricare un subset che la pagina non usa mai. Usa invece preconnect verso fonts.googleapis.com e fonts.gstatic.com, oppure ospita il font da te e fai il preload del tuo file.
Come fa unicode-range a risparmiare byte?
Quando una regola @font-face ha un unicode-range, il browser scarica quel file solo se la pagina usa almeno un carattere dell'intervallo. Dividi un font in file per latino, cirillico o greco e ogni visitatore scarica solo gli alfabeti presenti nella pagina.
La timeline di visualizzazione dei font
Quando il testo richiede un font non ancora arrivato, il browser attraversa fino a tre periodi. Nel block period impagina il testo con un fallback invisibile. Nello swap period mostra il fallback e cambia font quando questo arriva. Poi viene il failure period, in cui il fallback resta definitivamente.
font-display cambia solo la durata dei primi due periodi. I valori nel simulatore sono quelli consigliati dalla bozza CSS Fonts Level 4; i browser possono usare tempi leggermente diversi.
Perché i cambi tardivi causano layout shift
Anche il testo invisibile occupa uno spazio misurato con il font di fallback. Quando il font vero lo sostituisce, ogni riga può diventare più larga o più stretta, così i paragrafi vanno a capo in modo diverso e tutto ciò che sta sotto si sposta. Questo movimento viene conteggiato nel Cumulative Layout Shift.
Ci sono due rimedi. Evitare del tutto il cambio tardivo con optional, oppure fare in modo che il fallback occupi lo stesso spazio del web font usando size-adjust e i descrittori di override delle metriche su un fallback local().
Subsetting
Un font con migliaia di glifi è uno spreco per una pagina che ne usa cento. Gli strumenti di subsetting eliminano i caratteri inutilizzati prima del caricamento del file, e unicode-range permette al browser di saltare interi file che non gli servono.
Per un breve testo decorativo, l'API di Google Fonts accetta un parametro text= e restituisce un file con solo quei caratteri. È comodo per un logo o un singolo titolo composto in un carattere decorativo.
Font in self-hosting con preload
Fai il preload dell'unico file che serve alla prima schermata
as, type e crossorigin devono essere tutti presenti. La regola @font-face sta inline nella head, così viene individuata subito.
File separati con unicode-range
Subset latino e cirillico di un'unica famiglia
Entrambe le regole condividono il nome della famiglia. Una pagina scritta solo in inglese non scarica mai il file cirillico.
Un fallback dimensionato su misura
Fallback locale regolato per ridurre il layout shift
I numeri sono segnaposto: misura il tuo font rispetto al fallback e regolali finché i due non coincidono.
Google Fonts con preconnect e un subset per un titolo
Il secondo foglio di stile richiede solo le lettere del testo del logo, così quel file resta minuscolo.
Block breve (3s consigliati), swap infinito
Block estremamente breve (100ms o meno), swap infinito
Block estremamente breve, swap breve (3s consigliati)
Block estremamente breve, nessuno swap period
Simulatore della timeline di font-display
Vista iniziale: il font impiega 1.5 secondi a caricarsi; trascina il cursore per cambiarlo. Il grigio è testo invisibile, l'ambra il fallback, il blu il web font.
Il font arriva dopo {n}s
Web font non usato in questa visualizzazione della pagina
Cambio visibile: il testo può ricomporsi
Nessun cambio visibile
Scala: da 0 a 5 secondi. Con optional, la specifica consente al browser di interrompere un download tardivo o di completarlo con priorità molto bassa.