Google Fonts Locale — Font Self-Hosted GDPR (dffontmanager)

DF Font Manager ospita i tuoi Google Fonts direttamente sul tuo server PrestaShop: i tuoi visitatori non contattano mai più i server di Google (conformità GDPR), e cambi la tipografia del tuo negozio tramite semplici regole CSS, senza modificare un solo file del tema. Il modulo gestisce l’importazione dal catalogo Google Fonts, il subsetting automatico per alfabeto, il precaricamento del file critico, la strategia font-display e il caricamento di font personalizzati.

Installazione

1. Nel back office di PrestaShop, apri Moduli > Gestione moduli.
2. Clicca su Carica un modulo e trascina il file dffontmanager.zip.
3. Sotto il menu Design appare una scheda Gestore dei font: è lì che avviene tutto (anche il pulsante Configura del modulo reindirizza lì).

Il modulo si registra su tre hook (displayHeader, actionFrontControllerSetMedia, actionOutputHTMLBefore) e crea due tabelle: i font installati e le regole di sostituzione. I file dei font sono archiviati in modules/dffontmanager/views/fonts/ e il foglio di stile generato in modules/dffontmanager/views/css/generated/ — verifica che queste cartelle siano scrivibili.

Impostazioni generali

• Attiva i font self-hosted — interruttore principale: carica il foglio di stile generato e i tag di precaricamento nel front office.
• Rimuovi le chiamate esterne a Google Fonts (GDPR) — pulisce l’HTML renderizzato del negozio: tutti i tag link che puntano a fonts.googleapis.com o fonts.gstatic.com (fogli di stile, preconnect, precaricamenti) e i corrispondenti @import inline vengono rimossi prima dell’invio della pagina. È questa opzione che garantisce che nessuna richiesta raggiunga Google, anche se il tema o un altro modulo ne inietta una.
• Strategia font-display — applicata a tutte le dichiarazioni @font-face generate. swap (predefinita) mantiene il testo visibile durante il caricamento; block, fallback, optional e auto sono disponibili per esigenze specifiche.

Importare un font di Google Fonts

1. Nel pannello Importa un font di Google, digita almeno due caratteri: l’autocompletamento scorre il catalogo completo di Google Fonts, in cache per 7 giorni sul tuo server (pulsante di aggiornamento accanto al campo).
2. Seleziona una famiglia: appaiono le varianti disponibili (pesi da 100 a 900, normale e corsivo) e gli alfabeti. Di default sono preselezionati i pesi 400 e 700 e i subset latin + latin-ext.
3. Clicca su Importa localmente.

Il modulo interroga quindi l’API CSS di Google, scarica i file woff2 ufficiali corrispondenti alla tua selezione (un file per alfabeto e per variante), ne verifica la firma binaria, li archivia in views/fonts/nome-della-famiglia/ e rigenera il foglio di stile. La pagina si ricarica con la famiglia visibile nella tabella dei font installati, con il suo peso totale su disco.

Il subsetting automatico

Google divide ogni font in file per alfabeto (latin, latin-ext, cirillico, greco, vietnamita, ecc.). Il modulo scarica solo gli alfabeti selezionati e conserva l’unicode-range originale di ogni file nella dichiarazione @font-face. Il browser richiede quindi solo gli intervalli di caratteri realmente visualizzati sulla pagina: un tipico negozio italiano serve da 20 a 90 KB di font invece di diverse centinaia.

Reimportare o modificare una famiglia

Per aggiungere un peso o un alfabeto a una famiglia già installata, ripeti semplicemente l’importazione con la nuova selezione: i vecchi file della famiglia vengono sostituiti e le regole di sostituzione che la usano restano intatte.

Caricare un font personalizzato

Il pannello Caricamento font personalizzato accetta i formati woff2 (consigliato), woff, ttf e otf. Indica il nome della famiglia, il peso e lo stile, poi invia il file — un file per combinazione peso/stile, uniti automaticamente sotto la stessa famiglia. Ogni file viene validato tramite la sua firma binaria (non l’estensione), poi integrato nel foglio generato e disponibile nelle regole esattamente come un font di Google.

Gestire i font installati

La tabella dei font installati mostra per ogni famiglia: l’origine (google o custom), le varianti, i subset, il numero di file e il loro peso su disco, più due interruttori:

• Attivo — include o esclude la famiglia dal foglio di stile generato (i file restano su disco).
• Precaricamento — vedi la sezione dedicata più sotto.

Il pulsante di eliminazione rimuove la famiglia, i suoi file su disco e tutte le regole che la usano, poi ricostruisce il foglio di stile.

Regole di sostituzione

È qui che applichi i tuoi font senza toccare il tema. Ogni regola associa un selettore CSS a un font installato, con quattro opzioni:

• Peso — forza un font-weight (lascia vuoto per ereditare dal tema);
• Stile — normale o corsivo (vuoto per ereditare);
• Stack di riserva — famiglie generiche mostrate finché il font non è caricato: sans-serif, serif, monospace o system-ui, sans-serif;
• !important — selezionato di default, garantisce che la regola prevalga sugli stili del tema qualunque sia la loro specificità.

Esempi di selettori comuni:

• body — tutto il negozio;
• h1, h2, h3, h4, h5, h6 — tutti i titoli;
• .btn, button — i pulsanti;
• .product-title, .h3.product-title — i titoli prodotto negli elenchi (da adattare al tuo tema).

Ogni aggiunta o eliminazione di regola ricostruisce immediatamente il foglio di stile. Il foglio viene caricato dopo il CSS del tema: anche senza !important, le tue regole vincono la cascata a parità di specificità.

Precaricamento — buone pratiche

L’interruttore Precaricamento di una famiglia emette in testa alla pagina un tag link rel=preload as=font crossorigin per il suo file critico, scelto automaticamente: woff2, stile normale, alfabeto latin, peso più vicino a 400. Il browser scarica così il font in parallelo al CSS, ancora prima di scoprirne l’uso — il testo definitivo appare prima.

Funzionamento tecnico

• Il foglio generato fonts-v{timestamp}.css contiene tutte le dichiarazioni @font-face (con font-display e unicode-range) seguite dalle regole di sostituzione. Ogni ricostruzione produce un nuovo nome di file (cache-busting automatico) ed elimina le versioni precedenti.
• Viene registrato tramite actionFrontControllerSetMedia con una priorità che lo colloca dopo il CSS del tema.
• I tag di precaricamento vengono emessi da displayHeader; l’elenco dei file critici è in cache nella configurazione — nessuna query SQL aggiuntiva per pagina del front.
• La rimozione delle chiamate esterne viene eseguita in actionOutputHTMLBefore, sull’HTML finale, dopo la cache di Smarty.
• Il pulsante Ricostruisci il CSS forza una rigenerazione completa — utile dopo un intervento manuale sui file o un ripristino da backup.

Verificare la conformità GDPR

1. Apri il tuo negozio in una finestra di navigazione privata.
2. Apri gli strumenti di sviluppo (F12), scheda Rete, e filtra su fonts.g.
3. Ricarica la pagina: l’elenco deve restare vuoto. Se appare una richiesta verso fonts.googleapis.com o fonts.gstatic.com, attiva l’opzione di rimozione delle chiamate esterne e svuota la cache di PrestaShop.

Testa la home page, una scheda prodotto e il checkout: alcuni moduli di pagamento o widget di terze parti caricano i propri font in iframe, fuori dalla portata della pulizia HTML (in quel caso valgono i rispettivi banner di consenso).

Multinegozio

I font importati e le regole di sostituzione sono condivisi tra tutti i negozi della stessa installazione. Gli interruttori di attivazione e l’opzione di rimozione delle chiamate esterne seguono il contesto di configurazione standard di PrestaShop.

Risoluzione dei problemi

• Il font non appare nel front — verifica nell’ordine: l’interruttore principale è attivo, la famiglia è attiva, esiste una regola di sostituzione per il selettore giusto, e la cache di PrestaShop è svuotata (Parametri avanzati > Prestazioni). Poi ispeziona l’elemento nel browser: se la regola appare barrata, uno stile del tema più specifico la sovrascrive — seleziona !important sulla regola.
• L’importazione fallisce con un errore di rete — il tuo server deve poter raggiungere fonts.googleapis.com e fonts.gstatic.com in uscita (cURL o allow_url_fopen). Su un server dietro un firewall rigoroso, chiedi al tuo hosting l’apertura di questi due domini.
• L’autocompletamento non suggerisce nulla — il catalogo non è stato scaricato (rete). Clicca sul pulsante di aggiornamento del catalogo, oppure digita il nome esatto della famiglia e premi Invio: l’importazione diretta funziona anche senza catalogo.
• Errore di scrittura all’importazione o alla ricostruzione — concedi i permessi di scrittura al server web su modules/dffontmanager/views/fonts/ e modules/dffontmanager/views/css/generated/.
• Persistono chiamate a Google nonostante l’opzione di rimozione — individua l’origine nella scheda Rete (colonna iniziatore). Se proviene da un iframe di terze parti (pagamento, recensioni, mappe), la pulizia HTML non può raggiungerlo: vale allora il consenso di quel servizio terzo.

Aggiornamento del modulo

Disinstallazione

La disinstallazione elimina le due tabelle, le chiavi di configurazione, i file dei font scaricati e il foglio di stile generato. Il tuo negozio ritrova all’istante i font originali del suo tema — nessun residuo.