Hai fatto passare il tuo sito su GTmetrix e hai visto errori legati a Google Fonts? Non sei il solo. Le richieste esterne a fonts.googleapis.com rallentano il caricamento, e i plugin di caching come WP Rocket o WP Fastest Cache non possono comprimere asset ospitati su server di terze parti.

Dal 2022 c'è un motivo in più: un tribunale tedesco ha stabilito che il caricamento dinamico dei Google Fonts viola il GDPR, perché gli indirizzi IP dei visitatori vengono trasmessi ai server di Google negli Stati Uniti senza consenso. Ospitare i font in locale risolve tre problemi in un colpo solo: performance su GTmetrix, conformità GDPR e pieno controllo sulla cache.

Ecco una guida passo passo. Dalla scelta di un font su Google Fonts fino a un report GTmetrix pulito, con zero errori legati a risorse esterne.

💡 Panoramica rapida:

• Scarica da Google Fonts solo i pesi che ti servono
• Converti i file.ttf in WOFF2 usando Transfonter o google-webfonts-helper
• Carica i file in /wp-content/uploads/fonts/ via FTP
• Aggiungi le regole @font-face al CSS del tuo tema e verifica la resa
• Testa di nuovo il sito su GTmetrix; gli errori di Google Fonts dovrebbero essere spariti

Perché ospitare i font in locale

Quando un browser carica una pagina, va su fonts.googleapis.com, recupera il CSS e poi preleva i file dei font veri e propri da fonts.gstatic.com. Sono almeno due ricerche DNS esterne e due sessioni HTTP su cui non hai alcun controllo. Qui i plugin di caching sono impotenti: non puoi comprimere né rimandare il caricamento di una risorsa esterna.

L'hosting in locale cambia lo scenario. I file dei font risiedono sul tuo server, stesso dominio, stessa CDN, stesse regole di caching. Il browser non esce più verso l'esterno e GTmetrix e PageSpeed Insights smettono di lamentarsi delle risorse di terze parti.

E poi c'è il GDPR. A gennaio 2022, il Tribunale regionale di Monaco ha stabilito che il caricamento dinamico dei Google Fonts senza il consenso dell'utente viola il GDPR. Un'ondata di cause legali ha attraversato l'Europa e i proprietari di siti hanno iniziato a passare in massa all'hosting locale. Ospitare i font in proprio è la soluzione più affidabile.

Passo 1. Scegli un font su Google Fonts

Vai su Google Fonts e trova il font che ti serve. In questa guida uso Roboto, uno dei web font più diffusi, con supporto per il cirillico.

Due regole per restare leggeri:

• Pesi minimi. Ogni peso (regular, bold, italic) è un file separato e una richiesta separata. Se il tuo design usa solo regular e bold, deseleziona il resto.
• Font minimi. Limitati a uno o due font per sito. Un terzo font è già eccessivo per le performance, per quanto possa essere bello esteticamente.

Ho scelto Roboto Regular (400) e Roboto Bold (700). Tutto qui.

Passo 2. Scarica il font

Nella pagina del font, clicca sul pulsante "Scarica la famiglia". Google impacchetterà tutti i pesi in un archivio ZIP. La selezione dei pesi in questa fase non è rilevante; l'archivio contiene comunque l'intera famiglia. Faremo il filtro dopo.

Estrai l'archivio. Ci servono Roboto-Regular.ttf e Roboto-Bold.ttf.

Passo 3. Converti i font nei formati per il web

I browser non usano direttamente i.ttf. Servono i formati WOFF e WOFF2, che sono compressi e si caricano più velocemente. Ci sono due strumenti, entrambi gratuiti.

Transfonter è un classico: vai su transfonter.org, clicca su "Add fonts" e carica i tuoi file.ttf.

Lascia le impostazioni predefinite; WOFF e WOFF2 coprono tutti i browser moderni. EOT (per vecchie versioni di Internet Explorer) non serve nel 2026. Clicca «Convert».

Google-webfonts-helper è un'opzione più moderna specifica per Google Fonts. Il servizio su gwfh.mranftl.com genera sia i file WOFF2 sia il CSS pronto all'uso con @font-face. Non occorre caricare i font su un server di terze parti; tutto avviene in locale nel tuo browser. Per font con licenza e caratteri tipografici brandizzati, questo aspetto è rilevante.

Quale strumento scegliere? Transfonter è più semplice per un'operazione una tantum. Google-webfonts-helper è più comodo se cambi spesso font o lavori con caratteri commerciali che preferisci non caricare su server esterni.

Step 4. Carica i web font sul tuo server

Dopo la conversione, scarica lo ZIP. All'interno troverai i file.woff e.woff2 per ogni peso. Per Roboto Regular e Bold, ottieni 4 file:

Caricali via FTP o dal file manager del tuo hosting in /wp-content/uploads/fonts/. Il percorso /wp-content/uploads/ è stato scelto deliberatamente: gli aggiornamenti del core e del tema non lo toccano, a differenza della cartella del tema.

Dopo il caricamento, verifica aprendo un link diretto al file nel browser:

https://your-site.com/wp-content/uploads/fonts/Roboto-Regular.woff2

Il browser dovrebbe avviare il download. In caso contrario, controlla i permessi della cartella (devono essere 755) e il percorso stesso.

Step 5. Aggiungi @font-face al tuo CSS

L'archivio ZIP di Transfonter include un file stylesheet.css, un modello già pronto per collegare il font. Aprilo e copiane il contenuto.

Incolla il codice all'inizio del file style.css del tuo tema attivo (o custom.css se il tema lo supporta). Usa i percorsi dei file sul tuo server live, non quelli dell'archivio. Sostituisci gli URL relativi con quelli assoluti:

Codice originale da stylesheet.css:

1
src: url('Roboto-Bold.woff2') format('woff2'),
2
     url('Roboto-Bold.woff') format('woff');

Modificalo così:

1
src: url('https://your-site.com/wp-content/uploads/fonts/Roboto-Bold.woff2') format('woff2'),
2
     url('https://your-site.com/wp-content/uploads/fonts/Roboto-Bold.woff') format('woff');

Sostituisci your-site.com con il tuo dominio. Ripeti per ogni peso.

Per rendere il font facile da usare nel markup, aggiungi sotto le classi wrapper:

1
.roboto_font {
2
  font-family: "Roboto", "Arial", sans-serif;
3
}
4
 
5
.roboto_bold_font {
6
  font-family: "Roboto", "Arial", sans-serif;
7
  font-weight: bold;
8
}

Ora qualsiasi elemento con la classe roboto_font o roboto_bold_font verrà visualizzato in Roboto.

Step 6. Verifica la resa

Crea una pagina di test (o aprine una esistente in modalità bozza) e incolla questo HTML nell'editor di testo:

1
<h2>Default theme font</h2>
2
<h2 class="roboto_font">Roboto Regular — custom font</h2>
3
<h2 class="roboto_bold_font">Roboto Bold — bold weight</h2>

Apri l'anteprima. La prima intestazione usa il font predefinito del tema; la seconda e la terza usano Roboto.

Se il font non viene caricato, apri la console del browser (F12 → Network) e verifica che i file WOFF2 vengano caricati dal tuo dominio e non da fonts.gstatic.com. Il codice di risposta deve essere 200 e il tipo deve essere font/woff2.

Step 7. Imposta il font come predefinito

Per applicare Roboto all'intero sito senza aggiungere classi a ogni titolo, inserisci questo codice in style.css:

1
body {
2
  font-family: "Roboto", "Arial", sans-serif;
3
}

Attenzione: se il tuo tema utilizza già un font personalizzato, individua le righe font-family in style.css e sostituiscile. Aggiungere semplicemente una regola per il body sopra a una già esistente crea un conflitto. Assicurati che le vecchie dichiarazioni vengano rimosse o commentate.

Step 8. Configura una font stack di fallback

I Google Fonts non sono font di sistema. Se il browser non riesce a caricarli (visitatore offline, ad blocker, problema temporaneo), la pagina resterà senza testo. La soluzione è una font stack.

Sbagliato:

1
font-family: 'Roboto';

Corretto, con i fallback:

1
font-family: 'Roboto', Arial, sans-serif;

Il browser prova a caricare Roboto. Se non ci riesce, passa ad Arial. Niente Arial? Usa il sans-serif di sistema. La pagina è sempre leggibile, anche se il font personalizzato non viene caricato.

Step 9. Testa di nuovo il sito su GTmetrix

Esegui di nuovo GTmetrix. La sezione "Waterfall" non dovrebbe più mostrare richieste a fonts.googleapis.com o fonts.gstatic.com. Anche l'errore "Serve static assets with an efficient cache policy" per i font scomparirà, perché ora queste risorse si trovano sul tuo server e vengono gestite in cache secondo le tue regole.

Se gli errori persistono, controlla la scheda Waterfall. Un tema o un plugin (ad esempio, Elementor) potrebbero ancora richiamare i font dal CDN di Google. La prossima sezione ti aiuterà a risolvere il problema.

Alternativa per i più pigri: il plugin Local Google Fonts

Se non vuoi avere a che fare con FTP e CSS, esiste il plugin Local Google Fonts. Individua automaticamente tutti i Google Fonts utilizzati dal tuo tema e dai plugin, li scarica e li serve dal tuo server.

Pro: installi, attivi e dimentichi. Contro: funziona solo con i Google Fonts (non con altri font esterni) e non offre un controllo granulare sui formati. Per la maggior parte dei siti WordPress, è più che sufficiente.

Video utile sull'argomento

In inglese con una dimostrazione visiva di ogni passaggio, dalla scelta del font al CSS finale:

⁉️🤔 Domande frequenti

L’hosting in locale dei font è obbligatorio nel 2026?

Dal punto di vista legale, sì, se hai visitatori dall’UE. Il tribunale di Monaco nel 2022 ha creato un precedente e da allora decine di tribunali tedeschi lo hanno confermato: caricare dinamicamente Google Fonts senza consenso costituisce una violazione del GDPR. Dal punto di vista delle performance, anche sì: due lookup DNS aggiuntivi e una risorsa esterna non cacheabile non rendono il sito più veloce. Ospitare i font in locale risolve entrambi i problemi in un colpo solo. Il plugin Local Google Fonts richiede 5 minuti; il metodo manuale con Transfonter ne richiede 15. Scegli in base alla tua disponibilità a usare l’FTP.

Google-webfonts-helper o Transfonter: quale è meglio?

Per il collegamento una tantum di un singolo font non c’è quasi differenza. Transfonter è più semplice: carichi il.ttf e ottieni WOFF2 e CSS. Google-webfonts-helper è più comodo quando cambi font di frequente: non carica file su un server di terze parti e genera subito @font-face pronti all’uso con i percorsi corretti. Per i font con licenza commerciale, solo google-webfonts-helper.

Cosa fare se i font non vengono visualizzati dopo il caricamento in locale?

Tre cause tipiche. Prima: percorso sbagliato in url(): verifica che il link si apra nel browser e restituisca un file, non un 404. Seconda: CORS: se i font vengono caricati da una CDN o da un sottodominio, il server deve restituire l’header Access-Control-Allow-Origin. Terza: conflitto con il tema: apri DevTools (F12 → Computed), trova un elemento con il tuo font e controlla quale font-family viene effettivamente applicato. Spesso il tema lo sovrascrive più in basso nella cascata.

Posso ospitare i font su una CDN invece che sul mio server?

Sì, ma la CDN deve essere tua. Il principio chiave è che i font devono essere serviti dallo stesso dominio (o sottodominio) del sito, senza richieste cross-domain verso server di terze parti. In questo modo la cache funziona e il GDPR non viene violato.

Come posso verificare che i font vengano effettivamente caricati in locale?

Apri DevTools → Network → scheda Font. Ricarica la pagina. Tutte le richieste dei font devono puntare al tuo dominio. Se vedi fonts.googleapis.com o fonts.gstatic.com, da qualche parte è rimasto un caricamento esterno. Molto probabilmente un tema o un plugin lo sta ancora usando. Controlla le impostazioni o installa Local Google Fonts.

Cosa scegliere: caricamento manuale o plugin

Se sei arrivato a leggere fin qui, probabilmente ti interessa la performance del tuo sito. Ed è l’atteggiamento giusto. La differenza tra «sembra veloce» e «GTmetrix Grado A» spesso sta in piccoli dettagli come i font esterni.

Per un risultato rapido, installa Local Google Fonts. Cinque minuti e le richieste esterne a Google spariscono.

Per il pieno controllo su formati, caching e stack di fallback, scegli il metodo manuale con Transfonter o google-webfonts-helper. Sempre 15 minuti, ma conosci ogni file sul tuo server.

In ogni caso, esegui un test GTmetrix prima e dopo. Gli screenshot del «prima» e del «dopo» sono il modo migliore per confermare che non hai fatto tutto questo per niente.