Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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.

Ma mentre miglioravamo le prestazioni del nostro sito web, abbiamo scoperto che affidarsi a servizi di font di terze parti può rendere WordPress più lento, danneggiando l’esperienza dell’utente e potenzialmente danneggiando la SEO.

Abbiamo trovato alcuni modi per evitare questo problema. Una soluzione è quella di ospitare i font a livello locale.

Prendendo il controllo dei file dei font, il sito può saltare le fasi di caricamento aggiuntive, 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.

How to Host Local Fonts in WordPress for a Faster Website

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.

OMGF Settings

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.

Click the Save & Optimize Button

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.

Downloading a Google Font

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ì.

Upload the Fonts to Your Website

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:

1
2
3
4
5
@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:

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

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

Adding Custom CSS With the Theme Customizer

Guide di esperti sui font in WordPress

Speriamo che questo tutorial vi abbia aiutato a capire come ospitare i font locali in WordPress per rendere più veloce il vostro sito web. Potreste anche voler vedere altre guide sull’uso dei font in WordPress:

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

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

6 commentiLeave a Reply

  1. KENNETH GRAY

    Do I remove the wp google fonts plugin once the fonts have been moved over to my website?

    k

    • WPBeginner Support

      If you use the plugin, we would not recommend removing it to keep the fonts on your site.

      Admin

  2. Ashikur Rahman

    do i need to keep this plugin or i can remove that?

    • WPBeginner Support

      If you are using the plugin then we would recommend keeping the plugin active.

      Admin

  3. Liz S

    Don’t you also have to make some change to the functions.PHP file to add the new fonts so they show up in the customizer?

    • WPBeginner Support

      If you are using the manual method you would need to edit your theme’s CSS which we cover in the second method :)

      Admin

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.