WordPress Google Fonts: come utilizzarli

I Google Fonts sono una libreria di font creata da “Big G” messa a disposizione gratuitamente a chiunque voglia utilizzarli nei propri progetti anche a scopo commerciale.

Google fornisce un repository presente sul web dal 2010, in cui i web developer e designer possono consultare la lista dei font disponibili, scaricarli o individuare il codice da includere nei siti internet.

La libreria di font di Google ha agevolato l’esperienza di navigazione dell’utente, rendendo possibile l’utilizzo di font per il web che siano leggibili allo stesso modo da qualsiasi dispositivo (computer, pc tablet, smartphone), sistema (Android, iOS, Windows, macOS) e soprattutto internet browser (Internet Edge, Google Chrome, Safari, Mozilla Firefox).

Prima di capire come utilizzare i Google Fonts è bene sapere quali font scegliere per rendere l’interfaccia utente di un sito internet bella e performante.

Al giorno d’oggi non è solo importante avere un sito internet con una bella veste grafica ma è fondamentale fornire velocemente all’utente il contenuto che ha richiesto. Come da statistiche, il 47% degli utenti abbandona il sito internet se non riceve il contenuto da lui richiesto entro 2 secondi.

Ora ti starai chiedendo allora come faccio a scegliere i giusti Google Fonts da utilizzare ?

Analizziamo cosa accade sul dispositivo dell’utente quando viene richiesta una pagina web di un sito internet.

Il dispositivo dell’utente richiede al server che ospita il sito internet la pagina web che l’utente vuole visualizzare, il server a sua volta invia al dispositivo tutti i dati che consentono di far visualizzare il contenuto all’utente. Nel dettaglio il dispositivo dell’utente dovrà scaricare il codice html, le immagini e gli assets per effettuare il rendering della pagina web. Negli assets del sito internet sono presenti risorse css, javascript e i font.

Ora che sai che i font risiedono negli assets di un sito internet devi capire che un font ha un “peso” importante in una pagina web e che il dispositivo dell’utente deve scaricarlo per poter visualizzare correttamente la pagina web.

Gli utenti navigano giornalmente su internet e i loro browser continuano a scaricare assets, tra cui i font, dai siti internet che navigano. I font scaricati vengono salvati in un’area del browser chiamata cache che permette al dispositivo dell’utente di evitare di scaricare assets duplicati dai siti internet.

Detto ciò possiamo affermare che una risorsa presente nella cache del browser di un dispositivo di un utente non verrà scaricata una seconda volta ma verrà utilizzata e fornita direttamente dalla cache del browser presente nel dispositivo.

Quindi per scegliere il set di font di un sito internet non dobbiamo affidarci solo al gusto ma bensì bisogna ragionare in modo diverso e selezionare il giusto set di font in base alle statistiche di utilizzo degli stessi per permettere al dispositivo dell’utente di utilizzare i font presenti nella cache del browser.

Subito sotto la lista dei Google Fonts più utilizzati su internet come da statistiche:

Subito sotto un esempio del pannello di controllo di configurazione dei font del tema Avada:

Subito sotto un esempio del pannello di controllo di configurazione dei font del tema Avada:

Nel caso in cui il tema installato in WordPress non supporta i Google Fonts puoi utilizzare un plugin per installarli.

Subito sotto trovi una lista dei plugin più utilizzati per installare i Google Fonts in WordPress:

Puoi infine scegliere di installare i Google Fonts manualmente sul sito internet tramite l’inserzione di codice e l’utilizzo del linguaggio CSS. Questo metodo ti consente di avere un controllo completo sull’installazione e ottimizzare le prestazioni del sito internet.

Subito sotto un esempio pratico su come inserire il codice fornito da Google Fonts e come utilizzare i font installati in WordPress:

Apri un internet browser e vai sul sito internet ufficiale di Google Fonts seleziona un font e il relativo set di stili che vuoi installare in WordPress.

Copia il codice da incorporare nel sito internet che ti viene proposto dall’interfaccia di Google Fonts e inseriscilo all’interno del tag < head >

<head>
...
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
...
</head>

<head>
...
<style type="text/css">
h1 {
  font-family: 'Roboto', sans-serif;
}
</style>
...
</head>