Con questo post vediamo come caricare i font in locale su WordPress senza installare un nuovo plugin e rendere il sito web più veloce.
Come caricare i font in locale su WordPress
Un bel font potrebbe migliorare graficamente e l’esperienza utente del tuo sito Web, ma potrebbe rallentare il sito quando il font viene scaricato da siti esterni. La buona notizia è che puoi ospitare i font localmente per assicurarti maggiore velocità di caricamento delle pagine e, perché no, ottimizzare il sito in ottica SEO.
Perché ospitare i font in locale su WordPress?
Sebbene i font personalizzati possono migliorare l’estetica complessiva del sito Web, possono avere un impatto negativo sulle prestazioni di WordPress. Ad esempio, se utilizzi i font di Google, spesso questi vengono caricati da remoto e, anche se per frazioni di secondo, potrebbero rallentare il caricamento del sito web, specialmente se non è coadiuvato da un buon sistema di caching.
Un altro buon motivo per ospitare i font localmente è quello di restare conformi al GDPR, la politica della privacy adottata dall’Unione Europea. Quando qualcuno visita un sito Web che utilizza Google Fonts, il suo indirizzo IP viene registrato da Google e, quando viene fatto senza consenso, l’UE lo considera una violazione delle norme sulla privacy.
Tempo richiesto: 10 minuti
Vediamo ora come ospitare i font locali in WordPress senza utilizzare plugin aggiuntivi.
- Scegliere e scaricare i font desiderati
Come prima cosa bisogna individuare il font che si desidera utilizzare sul proprio sito. Ci sono molti posti dove trovare font web gratuiti come: Google Fonts, Adobe fonts, FontSquirrel e altri.
A questo punto scaricare l’archivio sul proprio computer per poi inviarlo via FTP nello spazio hosting dove è pubblicato il sito web. Ovviamente i font devono essere nel formato corretto per il web ed i formati utilizzabili sono: TTF, OTF, WOFF/WOFF2, SVG, EOT. Eventualmente si può convertire tramite il generatore offerto da Squirrel Webfont.
Poniamo il caso che hai scelto il carattere “Osvald” presente nel catalogo di Google Fonts, per scaricarlo clicca sulla finestra del font e successivamente sul pulsante “Download family”. A questo punto hai tutti i font della famiglia Osvald sul tuo computer.
- Caricare i font sul server
Ora bisogna caricare i file sul server dove è ospitato il tuo sito web. Operazione che è possibile fare tramite un client FTP, per esempio Filezilla.
Prima di caricare i file sul server bisogna creare una directory denominata “fonts” nella cartella dove c’è il tema o tema child utilizzato sul tuo sito, solitamente il percorso è: wp-content/theme/nome-tema
Puoi usare direttamente Filezilla per creare la directory “fonts” e, successivamente, caricare tutti i file che compongono la famiglia dei caratteri. - Impostare i nuovi font sul sito
Ora bisogna comunicare a WordPress che deve utilizzare il nuovo carattere sul sito e per fare questo dobbiamo inserire un pezzo di codice nel foglio di stile del tema. Puoi aggiungere il codice direttamente sul file “style.css” del tuo tema o utilizzando la sezione CSS aggiuntivo nella sezione di personalizzazione del tema.
Questo è il codice da inserire:@font-face {
font-family: Osvald;
src: url(http://dominiosito.it/wp-content/themes/twentytwenty/fonts/osvald.ttf);
font-weight: normal;
}
Nell’esempio sopra si evince che il font scelto è Osvald ed il sito utilizza il tema TwentyTwenty. - Visualizzare il nuovo carattere nei contenuti del sito
In questo ultimo step dobbiamo decidere in quali casi si devono visualizzare il nuovo carattere, se per esempio vogliamo che tutti i tag di intestazione (tag heading) devono avere il font Osvald, dobbiamo inserire questo codice nel foglio di stile:
h1, h2, h3, h4, h5, h6 {
font-family: Osvald, Arial, sans-serif;
}
Ora svuota la cache del sito e ricarica la pagina e vedrai che i titoli del sito avranno il nuovo carattere.
