Se ti è capitato di leggere la guida coi suggerimenti per velocizzare un sito WordPress, saprai già che il mio consiglio nel confronti dei Google Fonts è uno solo: non utilizzarli.
Prima di addentrarci nell’articolo, è bene tenere sempre a mente che i caratteri scelti per una pagina Web sono in grado di influenzarne la velocità di caricamento, uno degli elementi più impattanti sul posizionamento SEO.
Per capirci, un sito veloce che non sia il massimo a livello estetico, probabilmente avrà risultati altalenanti nella SERP, mentre uno che utilizza fonts gradevoli da vedere, ma che necessita di svariati secondi per caricarsi, avrà sicuramente un solo risultato: la morte della SEO.
A differenza di altre guide, ti dico subito che qui non troverai il modo per caricare i Google Fonts usando plugin.
Partendo dal presupposto che alcuni add-on sono diventati indispensabili, come un’applicazione, un plugin necessita di risorse per essere eseguito e, come per gli smartphone, c’è un limite al numero di add-on che un blog WordPress può eseguire prima che le sue prestazioni “muoiano”.
I plugin, infatti, occupano spazio nel file system e, se si ha a che fare con un servizio di hosting scadente, lo spazio potrebbe esaurirsi in tempi brevi.
Essendo semplici da utilizzare, a volte si è portati a scaricarne un’infinità, ma ricordati di utilizzare solamente add-on indispensabili e, ti assicuro, i plugin per aggiungere caratteri in WordPress non rientrano in questa categoria.
Indice dell’articolo
- Dove trovare i fonts di Google
- Quali Google Fonts scegliere
- Come scaricare Google Fonts
- Converti i Google Fonts in caratteri Web
- Come aggiungere i Google Fonts a WordPress
- Abilita il prefetch dei fonts
- Abilita il preload dei fonts
- Disabilita completamente i caratteri di Google in WordPress
- Le alternative migliori
Dove trovare i Google Fonts
Prima di cominciare è bene sottolineare che tutti i caratteri presenti nel catalogo di Google Fonts sono open source e liberi per l’utilizzo in progetti commerciali.
Accedi alla home di Google Fonts e cerca il carattere che pensi possa essere indicato per la tua tipologia di sito.
Se non hai la minima idea di quale Web font utilizzare, ti lascio qui il link agli Analytics di Google Fonts, con la classifica sempre aggiornata dei caratteri più utilizzati al mondo.
Quali Web font scegliere
Scegli un carattere “leggero” e, di quella famiglia, usa il numero minimo di stili (per questo esempio ho selezionato esclusivamente regular 400), perché meno caratteri corrispondono a un numero minore di richieste e tempi di caricamento più veloci.
Per questo esperimento useremo il carattere Poppins, che, personalmente, ritengo essere l’unico font al mondo per cui valga la pena perdere un po’ di velocità, e il tema Neve di Themeisle.
Come scaricare i Google Fonts
Clicca su Fonts, in alto a destra e, dopo aver individuato la famiglia Web ed aver selezionato gli stili che ti interessano, clicca su Download family.
Se apri la cartella Download del tuo computer, troverai il file .zip nominato Poppins.
Estrai lo stile Poppins-Regular.ttf.
Converti i Google Fonts in caratteri Web
Quello che devi fare ora, è convertire i file font .ttf in caratteri per il Web.
Collegati a Transfonter, clicca su Add fonts, seleziona Poppins-Regular.ttf e poi clicca su Convert e, successivamente, su Download.
Se apri la cartella Download del tuo computer, troverai il file .zip nominato transfonter.org.
Estrai lo stile nel formato WOFF2, quindi Poppins-Regular.woff2.
Transfonter genererà sia WOFF che WOFF2.
WOFF2 offre algoritmi di compressione infinitamente migliori, che riducono la dimensione del file originale di un ulteriore 30%.
Pertanto, i file WOFF2, rispetto ai WOFF, occupano meno larghezza di banda e si caricano ancora più velocemente.
Come aggiungere i Google Fonts a WordPress
Per caricare i file .woff nel tuo sito, accedi al File Manager tramite FTP o cPanel e inseriscili nella cartella wp-content/themes/miotema.
In questo specifico sito, l’URL appare così:
https://nicoforconi.it/wp-content/themes/neve-child-master/Poppins-Regular.woff2Ora non ti resta che aggiungere i font all’interno dello style.css.
Dal pannello di amministrazione di WordPress, vai su Aspetto, Editor del tema, apri il File del tema style.css e inserisci il seguente codice:
/* latin */
@font-face {
font-family: Poppins;
font-weight: 400;
font-display: swap;
src: url("/wp-content/themes/neve-child-master/Poppins-Regular.woff2") format("woff2");
}Abilita il prefetch dei fonts
La funzione prefetch permette di ridurre al minimo i tempi di latenza di rete e priorizzare il download di risorse che generano criticità quando la pagina viene scansionata dal browser.
La funzione che andiamo a vedere ora, notifica al client che ci sono risorse che ci serviranno in seguito da un URL specifico in modo che il browser possa risolvere il DNS il più rapidamente possibile.
Nel caso specifico, abbiamo bisogno di una risorsa disponibile all’interno del nostro sito, quindi andremo ad effettuare un prefetch in modo tale che, quando l’utente collegato richiederà un file dal nostro URL, non dovrà attendere la ricerca DNS.
Dal pannello di amministrazione di WordPress, vai su Aspetto, Editor del tema, apri il File del tema functions.php e aggiungi il seguente codice:
/**
* prefetch
*/
add_action('wp_head', 'dns_prefetch', 0);
function dns_prefetch() {
echo '<meta http-equiv="x-dns-prefetch-control" content="on"><link rel="dns-prefetch" href="https://nicoforconi.it" /><link rel="preload" href="/wp-content/themes/neve-child-master/Poppins-Regular.woff2" as="font" type="font/woff2" crossorigin>';
}Abilita il preload dei fonts
Se il prefetch identifica una risorsa che potrebbe essere richiesta durante la navigazione e che il browser dovrebbe scaricare quanto prima affinché questa sia già disponibile se richiesta, col preload indichi al browser che deve procedere direttamente al download perché la risorsa sarà richiesta sicuramente.
Data la sua natura, il preload va utilizzato solo ed esclusivamente per le risorse critiche come i Web Fonts, gli script essenziali e i CSS fondamentali.
/**
* preload fonts
*/
add_action( 'wp_enqueue_scripts', 'neve_deregister_font', 201 );
function neve_deregister_font() { wp_dequeue_style( 'neve-google-font-poppins' ); wp_deregister_style( 'neve-google-font-poppins' ); }Disabilita completamente i caratteri di Google in WordPress
Se, per qualche insano motivo, il tuo sito dovesse impazzire e mettersi a caricare i fonts direttamente da Google, potrebbero verificarsi una serie infinita di problemi tra cui il rallentamento o, ancora peggio, l’utilizzo di caratteri non supportati dai fonts incorporati dal tema.
Per questo motivo, ti consiglio di disabilitare i Google Fonts in maniera definitiva attraverso la funzione remove_google_fonts_stylesheet.
Dal pannello di amministrazione di WordPress, vai su Aspetto, Editor del tema, apri il File del tema functions.php e aggiungi il seguente codice:
/**
* disable Google fonts
*/
function remove_google_fonts_stylesheet() { wp_dequeue_style('themeisle-gutenberg-google-fonts-645'); }
add_action('wp_enqueue_scripts', 'remove_google_fonts_stylesheet', 999);Alternative a Google Fonts
Come detto all’inizio di questo articolo, il più grande svantaggio dell’utilizzo dei caratteri Web è che influiscono negativamente sulla velocità di rendering complessiva delle tue pagine.
Oltretutto, se utilizzi caratteri di terze parti, come Google Fonts o Typekit, nel caso in cui i servizi dovessero interrompersi, non hai nemmeno il controllo, a meno che tu non abbia caricato i fonts nel tuo server.
Qualche anno fa, il sito KeyCDN ha realizzato uno studio sulle prestazioni dei caratteri Web dal quale è emerso che Open Sans, il più veloce font di Google, impiega il 70% del tempo in più ad essere caricato rispetto ad Arial, il carattere WordPress di default.
Il 70% in più.
Per quanto mi riguarda, quindi, ho optato per l’utilizzo di caratteri che non hanno alcun impatto sulla velocità di caricamento del sito.
I font di sistema sono caratteri predefiniti e presenti nella maggior parte dei sistemi operativi.
I framework CSS Open Source che utilizzo sono quelli di Bootstrap, font di sistema alternativi che possono essere visualizzati dalla maggior parte dei software di sistema installati sui diversi device.
Il mio consiglio è di caricarli sul tuo sito anche se hai deciso di utilizzare i Google Fonts in locale.
Il perché è facilmente spiegabile.
Immagina di avere un appuntamento imperdibile e di avere a disposizione una macchina lussuosissima e super veloce: i fonts di Google caricati in locale.
Immagina ora di trovarti imbottigliato nel traffico nell’ora di punta.
La tua macchina lussuosa e veloce potrebbe rivelarsi completamente inutile.
Stai per perdere l’appuntamento più importante della tua vita, ma poi, ti ricordi di avere una bici elettrica nel bagagliaio.
Bene, quello che stai per inserire all’interno del tuo sito è la bici elettrica che ti permetterà di non mancare l’appuntamento nemmeno se dovessi incontrare l’ingorgo del secolo.
Dal pannello di amministrazione di WordPress, vai su Aspetto, Personalizza e, nella sezione CSS aggiuntivo, inserisci il seguente codice:
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "system";
}