Font web: come sceglierli e ottimizzarli
Come scegliere e ottimizzare i font web: l'impatto sulle performance, font di sistema vs personalizzati, formati moderni e tecniche per evitare rallentamenti e salti di testo.
I font web danno carattere a un sito, ma se non gestiti bene possono rallentarne il caricamento e causare fastidiosi "salti" del testo. Pochi ci pensano, eppure i font incidono sulle performance più di quanto si creda. In questo articolo ti spiego come scegliere e ottimizzare i font web.
Perché i font incidono sulle performance
Quando usi un font personalizzato (non installato di default sui dispositivi), il browser deve scaricarlo prima di mostrarlo. Questo può:
- Rallentare la comparsa del testo.
- Causare un "salto" quando il font personalizzato sostituisce quello temporaneo (un problema per i Core Web Vitals).
- Aggiungere peso alla pagina, soprattutto se usi molti font o varianti.
Per questo, i font fanno parte di una buona strategia di velocità.
Font di sistema vs font personalizzati
Hai due grandi opzioni:
Font di sistema
Usare i font già presenti sui dispositivi (quelli "di sistema").
- Pro: zero download, zero rallentamenti, caricamento istantaneo.
- Contro: meno controllo sull'aspetto, identità visiva meno distintiva.
Font personalizzati
Usare font tuoi (caricati o da servizi di font).
- Pro: identità visiva curata e distintiva.
- Contro: vanno scaricati, con possibili rallentamenti se non ottimizzati.
Il consiglio: se l'identità visiva non è prioritaria, i font di sistema sono la scelta più veloce. Se usi font personalizzati, ottimizzali bene.
Come ottimizzare i font personalizzati
Se scegli font personalizzati, questi accorgimenti li rendono performanti:
1. Usa formati moderni
I formati font moderni (come WOFF2) sono molto più leggeri dei vecchi. Usa sempre il formato più efficiente supportato.
2. Carica solo ciò che usi
- Includi solo i pesi e gli stili che usi davvero (non tutta la famiglia se ti servono due varianti).
- Considera di includere solo i caratteri necessari (subset), se usi una sola lingua.
3. Gestisci la visualizzazione durante il caricamento
Usa le impostazioni che mostrano subito il testo con un font di ripiego, sostituendolo poi con quello personalizzato (font-display). Così l'utente legge subito, anche prima che il font sia scaricato.
4. Precarica i font critici
Per i font più importanti (es. quello dei titoli), puoi indicare al browser di caricarli con priorità, riducendo il ritardo.
5. Riserva lo spazio (evita i salti)
Configura i font di ripiego in modo simile a quello finale, così quando il font personalizzato si carica, il testo non "salta" cambiando dimensioni.
Self-hosting o servizi esterni?
Puoi caricare i font sul tuo sito (self-hosting) o usarli da servizi esterni. Il self-hosting dà più controllo e spesso migliori performance (un caricamento in meno da un dominio esterno), oltre a vantaggi per la privacy. Per molti siti, ospitare i font è la scelta migliore.
In sintesi
I font web incidono sulle performance perché i font personalizzati vanno scaricati, con possibili rallentamenti e "salti" del testo. I font di sistema sono i più veloci (zero download), ideali se l'identità visiva non è prioritaria. Se usi font personalizzati, ottimizzali: formati moderni (WOFF2), solo i pesi che usi, gestione della visualizzazione durante il caricamento, precaricamento dei font critici e prevenzione dei salti. Il self-hosting offre spesso migliori performance e privacy.
Per il contesto, vedi come velocizzare un sito e cosa sono i Core Web Vitals.