Un font variabile è un singolo file che contiene tutte le variazioni di peso, larghezza e stile di una famiglia tipografica. Invece di caricare sei file separati per le varianti Regular, Medium, SemiBold, Bold, Italic e Bold Italic, il browser carica un file solo e interpola le variazioni internamente. Il risultato pratico: meno richieste HTTP, meno peso totale della pagina, rendering tipografico più veloce.
Per i siti web con molta variazione tipografica, il passaggio ai font variabili è una delle ottimizzazioni con il miglior rapporto tra sforzo e impatto sui Core Web Vitals. Non richiede modifiche al design, non cambia l’aspetto del sito e non ha costi aggiuntivi: Google Fonts e Adobe Fonts distribuiscono già la maggior parte dei loro font in formato variabile. L’unica cosa che cambia è come il font viene caricato.
Come funzionano i font variabili: la spiegazione pratica
I font tradizionali hanno varianti fisse: un file per ogni combinazione di peso e stile. Se il design usa Regular, Bold e Italic, il browser carica tre file. Se usa anche Medium e SemiBold, ne carica cinque. Ogni file è una richiesta HTTP separata che il browser deve completare prima di renderizzare il testo correttamente.
I font variabili funzionano diversamente. Un singolo file contiene gli assi di variazione: il peso va da 100 a 900 in modo continuo, non a scatti predefiniti. Il browser carica un file e usa i valori CSS font-weight per selezionare qualsiasi punto di quel continuum. Peso 450? Disponibile. Peso 372? Disponibile. Non esistono più “varianti”: esiste uno spazio di possibilità continuo.
Dal punto di vista del CSS, la sintassi cambia leggermente. Invece di dichiarare font-weight: bold per caricare il file Bold separato, si dichiara font-weight: 700 nel foglio di stile e il font variabile già caricato interpola internamente quel valore. La modifica è minima nel codice: il beneficio in termini di performance è immediato.
I numeri reali: cosa cambia sui Core Web Vitals
Sui siti che sviluppiamo e manteniamo per le agenzie partner, il passaggio ai font variabili produce risultati misurabili su due metriche specifiche.
La prima è il peso totale della pagina. Su un sito tipico con quattro o cinque varianti font, i file tipografici pesano mediamente tra i 400KB e i 900KB. Un font variabile equivalente pesa tra i 150KB e i 280KB. La riduzione è tra il 50% e il 70% del peso tipografico.
La seconda è il numero di richieste HTTP. Ogni file font è una richiesta separata che il browser deve completare. Con cinque file font, il browser apre cinque connessioni, aspetta cinque risposte, processa cinque download. Con un font variabile, fa tutto questo una volta. Su connessioni mobili lente, la differenza si traduce direttamente in un LCP più basso.
Qualche mese fa abbiamo ottimizzato il sito di un cliente ecommerce nel settore moda seguito da un’agenzia partner. Il sito usava sei varianti della stessa famiglia tipografica per diverse sezioni: titoli, sottotitoli, corpo del testo, caption, bottoni e prezzi. I sei file pesavano complessivamente 840KB e generavano sei richieste HTTP separate prima che il testo potesse essere renderizzato correttamente.
Abbiamo sostituito i sei file con un unico font variabile equivalente da 190KB. Il LCP è migliorato di 0,7 secondi su mobile, passando da 3,2 a 2,5 secondi, appena sotto la soglia verde di Google. Il numero di richieste HTTP si è ridotto di cinque. Nessuna modifica visibile al design: il sito aveva esattamente lo stesso aspetto di prima, con performance significativamente migliorate.
Come implementarli su WordPress
L’implementazione dei font variabili su WordPress dipende da come il sito carica attualmente i font.
Se il sito usa Google Fonts: la maggior parte dei font di Google Fonts è già disponibile in formato variabile. Basta modificare il parametro nella URL di importazione aggiungendo :ital,wght@0,100..900;1,100..900 invece delle varianti specifiche. Il CDN di Google Fonts restituirà automaticamente la versione variabile del font con l’asse di peso continuo.
Se il sito usa font caricati localmente: verificare se il font provider distribuisce una versione variabile del font in formato .woff2. La maggior parte dei font professionali ha una versione variabile disponibile. Il file va rinominato in modo che rifletta la natura variabile, ad esempio inter-variable.woff2, e dichiarato nel CSS con l’attributo font-style: oblique 0deg 20deg e font-weight: 100 900 per indicare al browser il range disponibile.
Se il sito usa un page builder come Bricks: Bricks supporta i font variabili attraverso le impostazioni tipografiche globali. Il font variabile va caricato nelle impostazioni del tema e poi assegnato agli elementi tipografici con i valori di peso corretti. La modifica richiede pochi minuti se il font è già disponibile in formato variabile.
Il problema che troviamo più spesso nelle implementazioni è la dichiarazione CSS non corretta. Un font variabile dichiarato senza specificare il range di peso supportato viene trattato dal browser come un font standard e non sfrutta le capacità di interpolazione continua. La dichiarazione corretta è fondamentale per ottenere il beneficio di performance.
Quando non conviene passare ai font variabili
Ci sono situazioni in cui il passaggio ai font variabili non produce benefici significativi o introduce complessità non giustificata.
Se il sito usa una sola variante font, il beneficio è minimo. Un singolo file Regular è già ottimizzato: sostituirlo con un font variabile che include tutte le varianti possibili significa caricare un file più pesante del necessario.
Se il font scelto dal design non ha una versione variabile disponibile, non è possibile fare il passaggio senza cambiare il font. In questo caso, la scelta è tra mantenere il font originale con le varianti separate o cambiare font per avere accesso alla versione variabile. Quasi sempre conviene mantenere il font originale e ottimizzare in altri modi.
Se il sito ha già poche varianti tipografiche, ad esempio solo Regular e Bold, il risparmio in termini di richieste HTTP è di una sola richiesta. Il beneficio c’è ma è meno significativo rispetto a un sito con cinque o sei varianti.
La regola pratica che usiamo: il passaggio ai font variabili ha senso quando il sito usa tre o più varianti della stessa famiglia tipografica e quando il font è disponibile in versione variabile senza compromessi di qualità.
Per approfondire tutte le ottimizzazioni che facciamo sui siti per migliorare i Core Web Vitals, leggi l’articolo dedicato. Per capire come strutturiamo la SEO tecnica su ogni progetto, leggi l’articolo dedicato. Per approfondire come strutturiamo un sito WordPress per performance elevate, leggi la checklist completa.
Su blurr.it/contatti/ puoi prenotare una chiamata per discutere come ottimizzare le performance dei siti che gestisci per i tuoi clienti.
FAQ
Un font variabile è un singolo file che contiene tutte le variazioni di peso e stile di una famiglia tipografica, con interpolazione continua invece di varianti fisse. Un font normale richiede un file separato per ogni combinazione di peso e stile: Regular, Bold, Italic, Bold Italic sono quattro file distinti. Un font variabile equivalente è un file solo con un asse di peso continuo da 100 a 900, che il browser usa per renderizzare qualsiasi punto di quel range senza caricare file aggiuntivi.
Indirettamente sì, attraverso il miglioramento dei Core Web Vitals. Google usa LCP, INP e CLS come fattori di ranking. Ridurre il peso dei font e il numero di richieste HTTP migliora il LCP, che è la metrica più direttamente impattata dalla tipografia. Un LCP che scende sotto i 2,5 secondi su mobile passa da “da migliorare” a “buono” nella valutazione di Google e può contribuire positivamente al posizionamento organico.
Su Google Fonts, i font variabili hanno un badge “Variable” visibile nella pagina del font. Su fonts.google.com è possibile filtrare per “Variable fonts” nella sezione filtri avanzati. Per font di altri provider, la documentazione tecnica specifica se esiste una versione variabile e con quali assi di variazione disponibili. Il formato del file è sempre .woff2 con un range di peso dichiarato nelle specifiche tecniche.
Per un sito che carica font da Google Fonts, la modifica richiede meno di un’ora: aggiornamento delle URL di importazione e verifica che i valori di font-weight nel CSS corrispondano al range disponibile nel font variabile. Per siti con font caricati localmente, il tempo dipende dalla disponibilità del font in formato variabile e dalla complessità del sistema tipografico. Per siti con design system ben strutturato, il passaggio richiede tra le due e le quattro ore incluso il testing su tutti i breakpoint.