Come ottimizzare i font web in WordPress per migliorare le prestazioni
I font web sono tra le risorse più pesanti che il browser deve scaricare per renderizzare una pagina. Google Fonts, Adobe Fonts e altri servizi offrono centinaia di font bellissimi, ma ogni font aggiunge richieste HTTP e kilobyte al caricamento. In questa guida ti spiego come ottimizzare i font per migliorare le prestazioni del tuo sito WordPress senza rinunciare alla tipografia.
Il problema dei font web nelle prestazioni
Un singolo font web con tutti i pesi (regular, bold, italic, bold italic) e il set di caratteri completo può pesare oltre 500 KB. Se usi due font diversi (uno per i titoli e uno per il corpo del testo), il peso raddoppia. Il browser deve scaricare questi file prima di poter mostrare il testo, causando due problemi:
- FOIT (Flash of Invisible Text): il testo rimane invisibile finché il font non viene scaricato. L’utente vede la pagina senza testo per qualche istante.
- FOUT (Flash of Unstyled Text): il browser mostra il testo con un font di fallback e poi lo sostituisce quando il font web viene scaricato, causando un fastidioso spostamento del layout.
Entrambi i problemi peggiorano il punteggio Cumulative Layout Shift (CLS) e Largest Contentful Paint (LCP) nelle Core Web Vitals di Google.
Ospitare i font localmente
Invece di caricare i font da Google Fonts o altri CDN esterni, ospitali sul tuo server. Questo elimina la connessione DNS al server esterno e ti dà pieno controllo sulla cache.
Per scaricare i font di Google Fonts in locale:
- Vai su google-webfonts-helper.herokuapp.com e cerca il font che usi.
- Seleziona i pesi che ti servono e scarica l’archivio con i file WOFF2.
- Carica i file nella cartella del tuo tema (es. fonts/).
- Aggiungi la dichiarazione @font-face nel tuo CSS.
In WordPress, puoi usare il plugin OMGF (Optimize My Google Fonts) che automatizza questo processo: scarica i font di Google Fonts, li salva sul tuo server e aggiorna i riferimenti CSS automaticamente.
Usare solo i pesi necessari
Molti temi caricano font con 6-8 pesi diversi (thin, light, regular, medium, semibold, bold, extrabold, black) quando ne servono solo 2-3. Ogni peso è un file separato da scaricare.
Regola pratica: per la maggior parte dei siti bastano tre pesi:
- Regular (400): per il corpo del testo.
- Bold (700): per i titoli e il testo in grassetto.
- Italic (400i): solo se usi effettivamente il corsivo nel contenuto.
Rimuovi i pesi inutilizzati dalle impostazioni del tema o dal codice che carica i font. Ogni peso rimosso può risparmiare 20-50 KB.
Usare il formato WOFF2
Il formato WOFF2 offre la migliore compressione per i font web, circa il 30% più leggero di WOFF e il 50% più leggero di TTF. È supportato da tutti i browser moderni (oltre il 97% degli utenti). Non servono più fallback verso WOFF o TTF: usa solo WOFF2.
@font-face {
font-family: 'MioFont';
src: url('fonts/miofont-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
Usare font-display: swap
La proprietà CSS font-display: swap dice al browser di mostrare immediatamente il testo con un font di fallback e poi sostituirlo quando il font web viene scaricato. Questo elimina il FOIT (testo invisibile) e migliora il Largest Contentful Paint.
Se carichi font da Google Fonts, aggiungi il parametro &display=swap all’URL:
https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap
Per i font locali, aggiungi font-display: swap; nella dichiarazione @font-face come mostrato nell’esempio precedente.
Precaricare i font critici
Il preload dice al browser di iniziare a scaricare il font il prima possibile, senza aspettare che il CSS venga analizzato. Aggiungi un tag link preload nell’<head> del tuo sito:
<link rel="preload" href="/wp-content/themes/tuo-tema/fonts/miofont-regular.woff2" as="font" type="font/woff2" crossorigin>
L’attributo crossorigin è obbligatorio anche per i font locali, perché i font vengono sempre scaricati in modalità CORS. Precarica solo i font critici (quelli usati above the fold), non tutti: precaricare troppi font ha l’effetto opposto perché satura la banda.
Ridurre i set di caratteri con il subsetting
Se il tuo sito è in italiano, non hai bisogno dei caratteri cirillici, greci o vietnamiti inclusi nella maggior parte dei font. Il subsetting rimuove i caratteri non necessari, riducendo drasticamente le dimensioni del file.
Strumenti come FontSquirrel Generator o glyphhanger (da riga di comando) possono creare un subset personalizzato del tuo font con solo i caratteri latini, riducendo il peso del 50-70%.
Google Fonts supporta il subsetting automatico: se richiedi il font con il parametro &subset=latin, il server restituisce solo i caratteri latini.
Serve assistenza?
Se i font rallentano il tuo sito WordPress e vuoi ottimizzarli senza compromettere il design, il team di SoccorsoWP può configurare tutto per te. Apri un ticket e migliora le prestazioni del tuo sito.
