Luigi Sabbetti

Come usare Google Fonts su WordPress


di // Pubblicato il: // Ultimo aggiornamento:

La tipografia è senza dubbio uno degli aspetti di maggiore impatto grafico all’interno di un sito web. Se stai pensando di personalizzare il tuo sito donandogli un aspetto particolare ed unico a livello tipografico, allora sei nel posto giusto.

In questo articolo, vedremo come usare Google Fonts su WordPress nel modo più rapido e semplice possibile. Google, infatti, mette a disposizione una vasta libreria tipografica dalla quale poter attingere gratuitamente per la creazione dei nostri progetti web.

In passato, ti ho già parlato delle librerie tipografiche di Adobe, oggi vedremo invece quelle messe a disposizione da Google, altrettanto performanti e facili da utilizzare sul nostro sito.

Non perdiamoci in ulteriori chiacchiere. Mettiti comodo, prepara una bella tazza di caffè nero bollente e segui tutti i passaggi che sto per elencarti. Vedrai che, in un batter d’occhio, il tuo sito acquisirà una grafica totalmente rinnovata e farai invidia a tutti i tuoi amici.

Indice dei contenuti

Cos’è un font

La parola font deriva dalla tipografia ed è stata poi traslata, nel corso degli anni, in ambito grafico multimediale. Per font si identifica sostanzialmente il tipo di carattere utilizzato per comporre i contenuti testuali di un sito web.

Come sappiamo, però, i font messi a disposizione da browser e sistemi operativi, di default, sono pochi e decisamente sgradevoli visivamente. Potresti quindi aver voglia di dare un tocco di autenticità al tuo sito web, installando un font custom.

Per fortuna ci viene incontro la libreria Google Fonts. Se non hai mai sentito parlare del progetto finora, lascia pure che ti faccia qualche accenno su questa utilissima libreria online messa a disposizione da Google.

Il progetto Google Fonts, che in precedenza portava il nome di Google Web Fonts, nasce nel 2010 e conta, ad oggi, oltre 800 fonts diversi al suo interno, pronti da utilizzare per i web designer di tutto il mondo.

La maggior parte dei font sono rilasciati sotto una particolare licenza definita SIL Open Font License che permette di utilizzarli liberamente sul proprio sito web senza particolari restrizioni, almeno non per scopi puramente commerciali.

I fonts più utilizzati a livello mondiale, sono il Roboto, il Lato, l’Open Sans e lo Slabo, ma al suo interno si possono trovare caratteri tipografici per tutti i gusti. Fatta questa doverosa premessa, vediamo come installare uno di questi citati font all’interno del nostro sito creato con WordPress.

Come inserire un Google Font in un sito WordPress

Per prima cosa scegliamo il font che più ci piace, in questo esempio utilizzeremo Roboto, ma la procedura è identica a prescindere dal font. Google Fonts, inoltre, vi da la possibilità di importare più font assieme in un unico colpo, basterà selezionarli.

Attraverso l’intuitivo motore di ricerca del sito, cerchiamo Roboto. Raggiunta la pagina del font, clicchiamo su select this font, troveremo una schermata simile a questa

Il font Roboto

Attraverso il tab Customize possiamo scegliere i pesi del font che vogliamo importare nel nostro sito web. Attenzione a non importarne troppi poiché questo avrà ripercussioni sulla velocità di caricamento del sito.

Ritorniamo nel tab Embed e copiamo il primo codice, nel mio caso, non avendo scelto alcun peso, sarà questo:

Adesso non dobbiamo fare altro che incollare questo codice all’interno del file header.php del nostro tema. Il file header.php si trova in questo percorso :

wp-content/themes/child-theme/header.php

Per raggiungerlo possiamo usare un client FTP, come filezilla, oppure affidarci alla gestione files del nostro hosting. Volendo, inoltre, possiamo modificare il file direttamente dall’admin di WordPress: basta andare in aspetto->editor e cercare il suddetto file.

Incolliamo il codice subito prima dell’inserimento dello style principale del tema o, in alternativa, dopo il codice php che inserisce gli script nel nostro head

<?php wp_head(); ?>

Non ci resta che uplodare o salvare il file ed iniziare ad utilizzare il nostro nuovo font all’interno del sito web. Ovviamente, per fare in modo che tutte i testi all’interno del nostro sito web assumano il font Roboto, dovremo settarlo all’interno del body tramite la seguente regola css

body {
font-family: Roboto, sans-serif;
}

Ricapitolando, ecco tutti i passaggi che dovrai effettuare per inserire un Google Fonts all’interno del tuo sito WordPress:

  • Vai sul sito ufficiale di Google Fonts
  • Scegli un font tra gli oltre 800 font disponibili
  • Nel Tab Customize, seleziona i pesi che ti interessano
  • Recati nel Tab Embed
  • Copia il codice
  • Raggiungi il file header.php presente nel tuo tema
  • Inserisci il codice nella sezione head
  • Modifica il CSS per assegnare il font agli elementi del tuo sito

Ora che hai imparato ad installare ed usare un Google fonts in WordPress, puoi divertirti a cambiare fonts, aggiungerne più di uno, magari con diversi pesi.

Conclusioni

Mi raccomando però, non esagerare con i fonts. Un buon sito web ne contiene al massimo 2/3 altrimenti diventerà un’accozzaglia di stili diversi ed inoltre, come ti dicevo, i font hanno un loro peso ed incidono sulle prestazioni finali del sito. Usali con moderazione!

Ti consiglio, inoltre, di effettuare la modifica all’interno del child theme e non direttamente nel tema padre, altrimenti verrà sovrascritta al primo aggiornamento e potresti perdere il lavoro svolto.

Iscriviti alla newsletter!