Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
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

Nota editoriale: guadagniamo una commissione dai link dei partner su WPBeginner. Le commissioni non influenzano le opinioni o le valutazioni dei nostri redattori. Per saperne di più su Processo editoriale.

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.

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:

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

Adding Custom CSS With the Theme Customizer

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.

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.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

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.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

7 commentiLascia una risposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Liz S says

    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 says

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

      Admin

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.