Dopo tanti anni nel web design, ho analizzato moltissimi siti web, dai più semplici ai più complessi, fatti in WordPress, Drupal, Joomla! o statici, in React, Angular…
Oggi posso dire che gli errori che portano un sito web a rallentare sono più o meno sempre gli stessi, e non dipendono dalla tecnologia impiegata.
In questo articolo ti parlo dei font e di come gestirli al meglio perché non rallentino il caricamento della pagina web.
Quanti font usare?
Si pensa che i file che pesano di più in una pagina sono le immagini.
Questo è vero, in parte, ma anche i font possono diventare una zavorra!
Alcuni font hanno tantissimi pesi e stili diversi, compresi i font variabili di Google Fonts: questo si traduce in file molto pesanti.
Per farti un esempio concreto: il font family Inter scaricato da Google Fonts e convertito in formato woff2 pesa 341 Kb.
Un’immagine fotografica di medie dimensioni (diciamo 1200px x 1200px), in formato Jpeg e compressa pesa intorno ai 100 Kb, anche meno.
La prima cosa da fare, dunque, è selezionare con cura due, massimo tre font, compresi i pesi.
Se vuoi usare Inter, potrebbe essere sufficiente usare il peso regular (400) e il peso bold (700) ed eventualmente una o due varianti per l’italic (se conti di usarlo).
Come includere i font nel sito web
So che il percorso più rapido è la CDN di Google Fonts: selezioni i font, clicchi su “Get embed code”, copi i due snippet di codice forniti da Google et voilà, i font sono caricati nella pagina web.
Questo però porta uno svantaggio rilevante per le performance del tuo sito web: i font vengono scaricati così come sono, senza la possibilità di creare un subset (nel prossimo capitolo ti spiego di cosa si tratta).
E quindi no, non scaricare i font dalla CDN di Google Fonts e caricali localmente seguendo questi passaggi:
- Scarica il font dal repository (può essere Google Fonts o qualsiasi altro sito che preferisci)
- nella cartella scaricata seleziona solo i pesi che ti servono davvero
- crea un subset di tutti i file selezionati
- converti i file in formato woff2
- inseriscili in una cartella del tuo sito (es. /theme/assets/fonts/[nome_font])
- crea il set di regole CSS del font-face e attribuisci i font dove serve
Nell’immagine che segue le regole che ho usato su questo sito web per includere i due font principali usati in tutte le pagine, Sofia Sans Regular e Sofia Sans Bold.
Come usare la regola CSS “font-display”
Oltre a indicare al browser quale font utilizzare e da dove scaricare il file necessario, puoi dirgli anche come gestire il testo nel lasso di tempo in cui il font non è ancora stato caricato.
Questo serve ad evitare un fenomeno noto come FOIT (Flash Of Invisible Text), ovvero quando i testi non vengono mostrati, lasciando delle aree vuote.
La regola CSS “font-display” serve appunto a questo.
In generale, ti consiglio di usare sempre “font-display:swap”, che dice al browser di usare un font di sistema finché non viene caricato quello indicato nel tuo foglio di stile.
La proprietà “optional”, invece, lascia al browser maggiore libertà decisionale. Se la connessione è lenta o il font non è immediatamente disponibile, il browser può scegliere di utilizzare soltanto il font di sistema senza attendere il download del font personalizzato.
Prova entrambe le soluzioni facendo dei test con Lighthouse o PageSpeed Insights e valuta quale proprietà ti garantisce il punteggio di performance migliore.
Caricamento preventivo
Una delle ottimizzazioni che ti consiglio di eseguire sempre nelle tue pagine è il precaricamento delle risorse critiche.
Si tratta di una tecnica per cui le risorse più importanti, ovvero quelle necessarie per la visualizzazione della sezione above the fold, vengono fatte caricare in anticipo dal browser.
In questo modo diminuisce il rischio di avere CLS (Cumulative Layout Shift), fortemente penalizzante nella valutazione dei Core Web Vitals da parte di Google, e i tempi di caricamento migliorano.
Ma attenzione: non significa che qualsiasi risorsa della pagina o esterna vada caricata in maniera preventiva!
Questa tecnica va usata con parsimonia e solo su quei file che servono per la above the fold.
Tutto il resto può aspettare.
Inserisci dunque uno snippet come questo nel tag <head> di pagina per ogni font necessario:
<link rel=”preload” as=”font” href=”[percorso_del_file]” type=”font/woff2″ crossorigin>
Carica solamente i font davvero usati nella parte iniziale della pagina, non tutti i font usati nel sito, altrimenti rallenterai il caricamento iniziale ottenendo l’effetto opposto!
Creazione di un subset
I file dei font possono contenere molti caratteri, in base a quali sistemi di scrittura sono coperti dal font.
Per esempio, il font Noto Sans comprende moltissimi caratteri (o, meglio, “glifi”), perché è nato per supportare centinaia di lingue e sistemi di scrittura diversi.
A te servono tutti questi glifi?
La risposta è piuttosto evidente: no, molto probabilmente non ti servono.
Se il sito web è in lingua italiana, probabilmente non avrai bisogno dei caratteri cirillici.
Se il sito web è in in italiano e in tedesco, dovrai assicurarti di includere caratteri come la ä, la ö e la ü ma potrebbero non servirti gli operatori matematici e le frecce.
Usa dunque uno strumento come FontSubset per creare un subset, ovvero una versione ridotta di ogni singolo file del font, includendo solo i glifi che realmente ti serviranno per il tuo sito web.
I passaggi sono semplici:
- carica il font in formato woff2, woff, ttf o otf
- deseleziona tutti i glifi di cui non hai bisogno
- puoi anche deselezionare in massa tutti i glifi che appartengono a un certo gruppo (es. cirillico, greco e copto, frecce…)
- man mano che rimuoverai i glifi, in alto vedrai ma mano scendere il numero di glifi selezionati
- assicurati di non aver deselezionato caratteri speciali che userai nel sito (per esempio “€” o “-“)
- scarica il nuovo file nel formato che preferisci (io ti consiglio il woff2 che è ampiamente supportato dai browser moderni)
Con questa tecnica puoi risparmiare moltissimi byte, anche il 50% e oltre rispetto al file originale.
Considera l’uso di font di sistema
A volte noi designer ci fissiamo un po’ troppo con il design, inteso proprio come estetica, del sito.
Usiamo solo font personalizzati per tutti i testi.
Ma c’è anche un’altra opzione: sfruttare i font di sistema.
I font di sistema sono quei font preinstallati sui dispositivi degli utenti, che quindi non richiedono il download dei file necessari perché già presenti nel file system.
Ogni sistema operativo ha i suoi, per esempio:
- Windows: Segoe UI
- macOS e iOS: San Francisco (o SF Pro)
- Android e ChromeOS: Roboto
- Linux: Ubuntu e Noto Sans
Si tratta di font ad alta leggibilità e con un aspetto piuttosto neutro, che secondo me si sposa con qualunque altro font.
Considera dunque l’idea di utilizzarlo nel tuo design, anche solo per i testi lunghi. Questa scelta ti permetterebbe di usare un solo font personalizzato per i titoli e magari per i testi degli elementi interattivi (tipo i bottoni e i badge), e sfruttare i font di sistema per tutto il resto.
Nel tuo foglio di stile dovrai utilizzare la tecnica così detta a fallback, indicando quali font di sistema sono da preferire, per esempio:
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen, Ubuntu, Cantarell, “Open Sans”, “Helvetica Neue”, sans-serif;
}
Con questo codice CSS stai dicendo al body di utilizzare i font di sistema generali, oppure quelli dei sistemi operativi Apple, oppure se i primi tre font non sono disponibili sul dispositivo dell’utente, usare il Segoe UI, il Roboto, Oxygen, Ubuntu….
Se nessuno di questi font è disponibile sul sistema dell’utente, il browser utilizzerà il font generico sans-serif.
Chiaramente questa scelta ti dà meno controllo sull’aspetto estetico della pagina, poiché in base al dispositivo usato i font cambieranno.
Valuta attentamente se questa scelta può essere adeguata al sito web che stai realizzando.
Io, ad esempio, in alcuni siti ho scelto di usare un solo font personalizzato per titolazione ed elementi interattivi, come i bottoni e le voci di menu, e i font di sistema per tutto il resto, in particolare nei testi lunghi degli articoli del blog aziendale.
In altri progetti, invece, ho preferito mantenere un font personalizzato per tutti i testi.
Questo sito, per esempio, utilizza in totale due font personalizzati, ma per gli snippet di codice è indicato un fallback di vari font di sistema di tipo “mono”, adatti a mostrare codice, che dunque non vengono caricati dal browser ma sono già presenti nel device.
Conclusioni
Come dico spesso, l’ottimizzazione delle web performance inizia già in fase di progettazione grafica.
Selezionare un numero adeguato di font personalizzati, non più di due o tre, è il primo passo per evitare che i font rallentino il tuo sito web.
Tieni sempre a mente che con i font tradizionali ogni peso corrisponde normalmente a un file in più, mentre i moderni variable font racchiudono più pesi in un unico file, ma possono risultare pesanti.