Come ospitare i font locali in WordPress per un sito web più veloce

Una bella tipografia può migliorare il design del sito web e affascinare il pubblico. Tuttavia, in qualità di esperti di prestazioni di WordPress, ci rendiamo conto che affidarsi a servizi di font di terze parti può rallentare il sito, danneggiando l’esperienza dell’utente e potenzialmente danneggiando la SEO.

La soluzione è quella di ospitare i font a livello locale. Prendendo il controllo dei file dei font, il sito può saltare i passaggi di caricamento aggiuntivi, garantendo un sito web velocissimo e una migliore esperienza utente e SEO.

In questo articolo vi mostreremo come ospitare i font locali in WordPress, consentendovi di migliorare la tipografia del vostro sito mantenendo prestazioni ottimali.

Perché ospitare localmente i font in WordPress?

Sebbene la tipografia e i font personalizzati possano migliorare l’estetica complessiva del sito web, hanno un impatto negativo sulle prestazioni di WordPress. Ad esempio, se si utilizza un font personalizzato da Google Fonts, questo viene caricato da servizi di terze parti che rallentano il sito web.

Fortunatamente, esiste un modo per utilizzare i font personalizzati senza rallentare il sito. In WordPress 6.0 è stata introdotta una nuova API Webfonts. Questa permette di ospitare i font localmente in modo che si carichino più velocemente.

Un altro motivo per ospitare Google Fonts a livello locale è la conformità al GDPR. Si tratta di una considerazione legale importante se avete visitatori del sito web provenienti dall’Unione Europea.

Quando qualcuno visita un sito web che utilizza Google Fonts, il suo indirizzo IP viene registrato da Google al momento del caricamento dei fonts. Poiché ciò avviene senza l’autorizzazione dell’utente, l’UE ritiene che ciò costituisca una violazione delle norme sulla privacy e che l’utente possa essere ritenuto responsabile di eventuali danni.

Detto questo, vediamo come ospitare i font locali in WordPress per avere un sito web più veloce. Verranno trattati due metodi, il primo dei quali è consigliato alla maggior parte degli utenti.

Metodo 1: ospitare i font locali in WordPress con un plugin

La prima cosa da fare è installare e attivare il plugin OMGF (Optimize My Google Fonts). Per maggiori dettagli, consultate la nostra guida passo-passo su come installare un plugin di WordPress.

OMGF è uno dei migliori plugin tipografici per WordPress. Offre un modo semplice per migliorare le prestazioni e la conformità al GDPR ospitando localmente i font di Google.

Dopo l’attivazione, è necessario visitare Impostazioni ” Ottimizzazione dei caratteri di Google per configurare il plugin. Si dovrebbe visualizzare la scheda “Ottimizza caratteri”.

Notate l’affermazione sotto la voce “Ottimizza Google Fonts”, secondo cui è sufficiente utilizzare le impostazioni predefinite per sostituire automaticamente i Google Fonts con copie ospitate localmente.

Ciò significa che, scorrendo la pagina delle impostazioni, è sufficiente assicurarsi che in “Opzione di visualizzazione dei caratteri” sia selezionata l’impostazione predefinita “Scambia (consigliato)”.

A questo punto non resta che fare clic sul pulsante “Salva e ottimizza” in fondo alla pagina.

Nella parte superiore dello schermo apparirà un messaggio che dice “Ottimizzazione completata con successo”.

Congratulazioni! I vostri Google Font sono ora ospitati localmente. Il vostro sito web verrà caricato più velocemente e avrete ridotto il rischio di cause legali europee.

Metodo 2: Ospitare manualmente i font locali in WordPress

Potete anche ospitare i font a livello locale senza utilizzare un plugin, utilizzando il metodo @font-face della nostra guida su come aggiungere font personalizzati in WordPress. Sebbene questo metodo richieda più lavoro, vi permette di utilizzare qualsiasi font di vostro gradimento sul vostro sito web.

È necessario scaricare i font che si desidera utilizzare in un formato web. Ci sono molti posti dove trovare ottimi font web gratuiti, come Google Fonts, Typekit, FontSquirrel e altri.

Se non si dispone del formato web per il font, è possibile convertirlo utilizzando il generatore di FontSquirrel Webfont.

Ora dovete memorizzare i font sul vostro server di hosting WordPress. Potete caricare i file tramite FTP o utilizzando il File Manager del cPanel del vostro host.

È necessario creare una nuova cartella chiamata “fonts” nella directory del tema o del tema figlio e caricarla lì.

Una volta caricato il font, è necessario caricarlo nel foglio di stile del tema utilizzando un CSS personalizzato. È possibile aggiungere il codice direttamente al file style.css del tema, oppure utilizzando la sezione CSS aggiuntivi del personalizzatore del tema.

È possibile farlo utilizzando una regola CSS3 @font-face come questa:

@font-face {
    font-family: Arvo;
    src: url(http://example.com/wp-content/themes/twentytwentyone/fonts/Arvo-Regular.ttf);
    font-weight: normal;
}

Non dimenticate di sostituire la famiglia di caratteri e l’URL con i vostri.

Dopodiché, è possibile utilizzare il font in qualsiasi punto del foglio di stile del tema o nella sezione CSS aggiuntivi del personalizzatore del tema. Il CSS da utilizzare dipende dal tema e dal punto in cui si desidera utilizzare il font locale. Ecco un esempio tratto dal nostro sito web demo:

h1 {
font-family: Arvo, Arial, sans-serif;
}

Come si può vedere, la nostra intestazione ora utilizza il font Arvo ospitato localmente.

Guide di esperti sui font in WordPress

Ora che sapete come ospitare i font locali, potreste voler vedere altre guide sull’uso dei font in WordPress.

• Cos’è un font sicuro per il web + 19 migliori font sicuri per il web
• Come cambiare i caratteri nel vostro tema WordPress (modi semplici)
• Come modificare facilmente le dimensioni dei caratteri in WordPress
• Come aggiungere caratteri personalizzati in WordPress
• Come rendere i font di Google compatibili con la privacy
• Come disattivare i font di Google sul vostro sito web WordPress
• Come aggiungere facilmente font di icone nel vostro tema WordPress
• I migliori plugin tipografici per WordPress per migliorare il vostro design

Speriamo che questo tutorial vi abbia aiutato a capire come ospitare i font locali in WordPress per un sito web più veloce. Potreste anche voler consultare la nostra guida su come aumentare il traffico del vostro blog o la nostra selezione di plugin WordPress indispensabili per far crescere il vostro sito.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.