Quando il tuo sito WordPress carica i Google Fonts da fonts.googleapis.com, il browser di ogni visitatore invia una richiesta ai server di Google. Questa richiesta include l'indirizzo IP del visitatore, lo user agent, l'URL referrer e altri metadati. Google riceve questi dati a ogni visualizzazione di pagina, il che rappresenta un problema significativo per la privacy ai sensi della legge europea sulla protezione dei dati.
Perché i Google Fonts sono un problema GDPR
Nel gennaio 2022, un tribunale tedesco (LG München, causa 3 O 17493/20) ha stabilito che incorporare i Google Fonts tramite il link esterno predefinito costituisce una violazione del GDPR. Il tribunale ha rilevato che la trasmissione dell'indirizzo IP di un visitatore a Google senza previo consenso viola l'articolo 6, paragrafo 1 del GDPR, perché l'operatore del sito non ha un interesse legittimo che superi il diritto dell'utente alla protezione dei dati. L'operatore del sito è stato condannato a pagare un risarcimento al visitatore interessato.
Questa sentenza ha creato un chiaro precedente in tutta l'UE. Da allora, diversi studi legali hanno inviato lettere di diffida di massa agli operatori di siti web che caricano ancora i Google Fonts esternamente. La soluzione è semplice: ospita i file dei font sul tuo server in modo che nessun dato venga inviato a Google. Questo approccio è completamente conforme al GDPR, elimina il rischio legale e spesso migliora anche la velocità di caricamento.
Scaricare i Google Fonts per l'auto-hosting
Il modo più semplice per ottenere i file dei font corretti con il CSS giusto è lo strumento Google Webfonts Helper di Mario Ranftl. Ecco come usarlo:
- Apri Google Webfonts Helper e cerca il font che ti serve (ad es. "Open Sans", "Roboto", "Lato").
- Seleziona i set di caratteri di cui hai bisogno. Per la maggior parte dei siti europei, "latin" e "latin-ext" sono sufficienti. Aggiungi "cyrillic" o "greek" solo se i tuoi contenuti utilizzano effettivamente quegli script.
- Scegli i pesi e gli stili del font che usi sul tuo sito. Le selezioni comuni sono 400 (regular), 400 corsivo, 700 (bold) e 700 corsivo. Evita di selezionare pesi che non utilizzi effettivamente, perché ogni peso aumenta la dimensione del file.
- Lo strumento genera regole CSS
@font-facepronte all'uso. Copiale. Puoi adattare il prefisso del percorso del file alla struttura delle directory del tuo server. - Scarica il file zip con tutti i file dei font selezionati nei formati moderni (woff2 e woff).
Auto-hosting manuale passo dopo passo
Passo 1: Carica i file dei font
Crea una directory fonts nella cartella del tuo tema o tema figlio e carica lì i file dei font scaricati:
/wp-content/themes/tuo-tema/fonts/
open-sans-v40-latin-regular.woff2
open-sans-v40-latin-regular.woff
open-sans-v40-latin-700.woff2
open-sans-v40-latin-700.woffSe utilizzi un tema figlio, posiziona i font nella cartella del tema figlio in modo che sopravvivano agli aggiornamenti del tema principale.
Passo 2: Aggiungi il CSS @font-face
Aggiungi il CSS generato da Google Webfonts Helper al foglio di stile del tuo tema o a un file CSS personalizzato. Assicurati di impostare font-display: swap in modo che il testo rimanga visibile durante il caricamento dei font:
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'),
url('../fonts/open-sans-v40-latin-regular.woff') format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2'),
url('../fonts/open-sans-v40-latin-700.woff') format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('../fonts/open-sans-v40-latin-italic.woff2') format('woff2'),
url('../fonts/open-sans-v40-latin-italic.woff') format('woff');
}Passo 3: Rimuovi il riferimento esterno a Google Fonts
Devi impedire al tuo tema di caricare i font da fonts.googleapis.com. Questo si ottiene tipicamente facendo il dequeue dello style handle. Il nome dell'handle varia in base al tema, quindi potresti dover ispezionare il sorgente HTML per trovarlo:
add_action('wp_enqueue_scripts', function() {
// Nomi di handle comuni utilizzati dai temi
wp_dequeue_style('google-fonts');
wp_deregister_style('google-fonts');
// Alcuni temi utilizzano altri handle
wp_dequeue_style('flavor-google-fonts');
wp_deregister_style('flavor-google-fonts');
// Tema Divi
wp_dequeue_style('divi-fonts');
wp_deregister_style('divi-fonts');
}, 100);La priorità 100 garantisce che questo codice venga eseguito dopo che il tema ha aggiunto i suoi stili. Se il tema utilizza un nome di handle diverso, controlla il sorgente della pagina per un tag <link> con fonts.googleapis.com e annota l'attributo id (rimuovi il -css finale per ottenere il nome dell'handle).
Alcuni temi codificano il link di Google Fonts direttamente nell'header del template invece di utilizzare wp_enqueue_style. In tal caso, potresti dover modificare il template dell'header o utilizzare un tema figlio per sovrascriverlo.
Auto-hosting con un plugin
Se preferisci non lavorare manualmente con file di font e CSS, i plugin possono automatizzare l'intero processo:
- OMGF (Optimize My Google Fonts): rileva automaticamente i Google Fonts caricati sul tuo sito, scarica i file dei font sul tuo server, genera il CSS
@font-facelocale e rimuove i riferimenti esterni a Google Fonts. Effettua anche il preload dei font per migliori prestazioni e gestisce il cache-busting. È l'opzione più popolare per questo compito specifico. - Asset CleanUp (Pro): oltre all'ottimizzazione generale degli asset, può rilevare i Google Fonts e ospitarli localmente. Offre maggiore controllo su quali pagine caricano quali font, utile per siti in cui sezioni diverse utilizzano tipografie diverse.
- Perfmatters: include una funzione Google Fonts locale insieme ad altri strumenti di ottimizzazione delle prestazioni. Una buona scelta se desideri un unico plugin per molteplici miglioramenti delle prestazioni.
Capire font-display: swap
La proprietà font-display: swap nelle tue regole @font-face è importante per l'esperienza utente e per i Core Web Vitals. Senza di essa, i browser potrebbero nascondere il testo finché il font non termina il caricamento (noto come FOIT, o Flash of Invisible Text). Con swap, il browser mostra immediatamente il testo con un font di sistema di fallback e lo sostituisce non appena il font personalizzato viene caricato. Questo evita che i layout shift vengano conteggiati nel tuo punteggio Cumulative Layout Shift (CLS) e garantisce che i contenuti rimangano leggibili anche su connessioni lente.
Subsetting dei font per migliori prestazioni
Se desideri spingerti oltre con l'ottimizzazione, considera di effettuare il subsetting dei tuoi font. Un file di font "Latin Extended" completo può contenere caratteri per lingue che non userai mai sul tuo sito. Strumenti come fonttools (pyftsubset) o Everything Fonts Subsetter possono rimuovere i caratteri inutilizzati e ridurre significativamente la dimensione del file. Ad esempio, un file di font che copre l'intero Latin Extended potrebbe essere di 25KB, ma un subset con solo i caratteri utilizzati in italiano e inglese potrebbe scendere sotto i 15KB. Per la maggior parte dei siti, i set di caratteri offerti da Google Webfonts Helper sono già un subset ragionevole, quindi questo passaggio è opzionale.
Verificare che non ci siano più richieste di font esterne
Dopo aver applicato le tue modifiche, è importante verificare che non ci siano più richieste a fonts.googleapis.com o fonts.gstatic.com. Apri gli strumenti per sviluppatori del tuo browser (F12), vai alla scheda Rete, ricarica la pagina e filtra per "font" o cerca "googleapis". Controlla più pagine, non solo la homepage, perché alcuni temi caricano font diversi su modelli di pagina diversi.
Controlla anche i Google Fonts caricati dai plugin. Alcuni page builder, slider plugin o plugin di moduli caricano i propri Google Fonts indipendentemente dal tema. Potresti dover controllare le impostazioni di ogni plugin per un'opzione "Disabilita Google Fonts" o "Carica font localmente".
Verifica con InspectWP
Esegui una nuova scansione InspectWP dopo aver applicato le tue modifiche. La sezione GDPR del tuo report mostrerà se ci sono ancora richieste ai server di Google Fonts. InspectWP controlla le connessioni sia a fonts.googleapis.com (il CSS) sia a fonts.gstatic.com (i file dei font stessi). Se tutti i font sono correttamente auto-ospitati, nessuno dei due domini dovrebbe apparire nell'elenco delle risorse esterne.