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

Una bella tipografia può migliorare il design del tuo sito web e catturare il tuo pubblico.

Ma mentre miglioravamo le prestazioni del nostro sito web, abbiamo scoperto che affidarsi a servizi di font di terze parti può rallentare WordPress, danneggiando l'esperienza utente e potenzialmente la tua SEO.

Abbiamo trovato alcuni modi per evitare questo problema. Una soluzione è ospitare i font localmente.

Prendendo il controllo dei tuoi file di font, il tuo sito può saltare questi passaggi di caricamento aggiuntivi, garantendo un sito web velocissimo con una migliore esperienza utente e SEO.

In questo articolo, ti mostreremo come ospitare font locali in WordPress, permettendoti di migliorare la tipografia del tuo sito mantenendo prestazioni ottimali.

Perché ospitare i font localmente in WordPress?

Mentre la tipografia e i font personalizzati possono migliorare l'estetica generale del sito web, hanno un impatto negativo sulle prestazioni di WordPress. Ad esempio, se stai usando un font personalizzato da Google Fonts, questi vengono caricati da servizi di terze parti che rallenteranno il tuo sito web.

Fortunatamente, c'è un modo per utilizzare font personalizzati senza rallentare il tuo sito. Una nuova Webfonts API è stata introdotta in WordPress 6.0. Questo ti permette di ospitare i font localmente in modo che si carichino più velocemente.

Un altro motivo per ospitare Google Fonts localmente è per rimanere conformi al GDPR. Questa è un'importante considerazione legale se hai visitatori del sito web dall'Unione Europea.

Quando qualcuno visita un sito web che utilizza Google Fonts, il suo indirizzo IP viene registrato da Google quando i font vengono caricati. Poiché ciò avviene senza il loro permesso, l'UE considera ora ciò una violazione delle normative sulla privacy e potresti essere responsabile per i danni.

Detto questo, diamo un'occhiata a come ospitare font locali in WordPress per un sito web più veloce. Tratteremo due metodi, e il primo metodo è consigliato per la maggior parte degli utenti.

1. Ospitare font locali in WordPress con un plugin
2. Ospitare font locali in WordPress manualmente
3. Guide Esperte sui Font in WordPress

Metodo 1: Ospitare font locali in WordPress con un plugin

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

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

Dopo l'attivazione, devi visitare Impostazioni » Ottimizza Google Fonts per configurare il plugin. Dovresti trovarti nella scheda 'Ottimizza Font'.

Nota l'affermazione sotto l'intestazione 'Ottimizza Google Fonts' che è sufficiente utilizzare le impostazioni predefinite per sostituire automaticamente i tuoi Google Fonts con copie ospitate localmente.

Ciò significa che scorrendo la pagina delle impostazioni, tutto ciò che devi fare è assicurarti che l''Opzione Font-Display' abbia l'impostazione predefinita 'Swap (consigliato)' selezionata.

Tutto ciò che devi fare ora è fare clic sul pulsante 'Salva e ottimizza' in fondo alla pagina.

Vedrai un messaggio nella parte superiore dello schermo che dice 'Ottimizzazione completata con successo.'

Congratulazioni! I tuoi Google Fonts sono ora ospitati localmente. Il tuo sito web si caricherà più velocemente e avrai ridotto il rischio di cause legali europee.

Metodo 2: Ospitare manualmente i font locali in WordPress

Puoi anche ospitare i font localmente senza usare un plugin utilizzando il metodo @font-face dalla nostra guida su come aggiungere font personalizzati in WordPress. Sebbene questo metodo richieda più lavoro, ti permette di usare qualsiasi font desideri sul tuo sito web.

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

Se non hai il formato web per il tuo font, puoi convertirlo utilizzando il generatore di Webfont di FontSquirrel.

Ora devi archiviare i font sul tuo server di hosting WordPress. Puoi caricare i file usando FTP o usando il File Manager del cPanel del tuo host.

Dovresti creare una nuova cartella chiamata 'fonts' nella directory del tuo tema o tema figlio e caricarli lì.

Una volta caricato il font, è necessario caricarlo nel foglio di stile del tuo tema utilizzando CSS personalizzato. Puoi aggiungere il codice direttamente al file style.css del tuo tema, o utilizzando la sezione CSS aggiuntivo del personalizzatore del tema.

Puoi 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 dimenticare di sostituire il nome del font e l'URL con i tuoi.

Dopodiché, puoi utilizzare quel font ovunque nel foglio di stile del tuo tema o nella sezione CSS aggiuntivo del personalizzatore del tema. Il CSS che utilizzerai dipenderà dal tuo tema e da dove desideri utilizzare il font locale. Ecco un esempio dal nostro sito demo:

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

Come puoi vedere, il nostro titolo sta ora utilizzando il font Arvo ospitato localmente.

Guide Esperte sui Font in WordPress

Speriamo che questo tutorial ti abbia aiutato a imparare come ospitare font locali in WordPress per un sito web più veloce. Potresti anche voler consultare altre guide relative all'uso dei font in WordPress:

• Cos'è un font Web Safe + 19 migliori font Web Safe
• Come cambiare i font nel tuo tema WordPress (modi semplici)
• Come cambiare facilmente la dimensione dei font in WordPress
• Come aggiungere font personalizzati in WordPress
• Come rendere Google Fonts rispettoso della privacy
• Come disabilitare i Google Fonts sul tuo sito WordPress
• Come aggiungere facilmente font icona nel tuo tema WordPress
• I migliori plugin di tipografia per WordPress per migliorare il tuo design

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.