Font web in locale: più velocità e meno problemi di privacy rispetto ai servizi esterni

Caricare i caratteri da un servizio esterno trasmette l'IP dei visitatori a terzi e aggiunge connessioni, senza i vantaggi di cache di un tempo. Ospitarli sul tuo server è semplice e spesso rende il sito più veloce.

Font web in locale: più velocità e meno problemi di privacy rispetto ai servizi esterni

Apri il tuo sito, poi gli strumenti per sviluppatori del browser, scheda Rete, e ricarica la pagina. Se tra le richieste compare fonts.googleapis.com o fonts.gstatic.com, ogni visitatore sta mandando il proprio indirizzo IP a un server di terzi solo per vedere i caratteri del tuo testo.

Per anni è sembrato innocuo. A gennaio 2022 un tribunale di Monaco di Baviera ha condannato il gestore di un sito a risarcire un utente proprio per questo, perché i font venivano caricati da Google Fonts senza consenso. Da allora in Europa le contestazioni si sono moltiplicate. Ospitare i font sul tuo server toglie il problema alla radice.

C’è anche una ragione di velocità, e smentisce un’idea molto diffusa. Un tempo si diceva che usare un servizio comune convenisse perché il visitatore aveva già il font in cache da un altro sito. Da alcuni anni non è più vero: i principali browser separano la cache per sito, quindi ogni sito scarica comunque i suoi font. Il servizio esterno aggiunge soltanto una connessione a un altro dominio.

Portarli in casa senza peggiorare le cose

I font open source, come quelli di Google Fonts, si possono ospitare liberamente; per quelli commerciali leggi la licenza. Usa il formato WOFF2, il più compresso, supportato da tutti i browser moderni. Carica solo ciò che serve: pochi pesi e stili e solo i set di caratteri necessari, di solito il latino. Un font variabile racchiude tutti i pesi in un unico file, e spesso pesa meno di tre file separati.

Nella dichiarazione @font-face aggiungi font-display: swap, così il testo compare subito con un carattere di sistema e viene sostituito appena il font è pronto. Il font principale va precaricato con <link rel="preload">, per ridurre lo spostamento del testo durante il caricamento.

Su WordPress resta un’insidia: temi, page builder e plugin che continuano a caricare i font da Google anche dopo che li hai messi in locale. Cerca nelle loro opzioni la voce per disattivare il caricamento esterno. Poi ripeti la prova dall’inizio, con la scheda Rete aperta. Il lavoro è finito quando quei due domini non compaiono più, e quando la misura della velocità ti dà ragione.

Condividi LinkedIn X Telegram

Continua a leggere