Luigi Sabbetti

Il mondo del web a 360 gradi

Come usare Google Fonts in Wordpress

Come usare Google Fonts in WordPress


di // Pubblicato il: 7 aprile 2018

Stai pensando di personalizzare il tuo sito web con uno stile particolare. Ti piacerebbe, dunque, conoscere come usare Google Fonts in WordPress. Bè, caro mio, non c’è niente da preoccuparsi: oggi vedremo assieme come utilizzare un font della famosa libreria google all’interno del nostro sito.

Cos’è un font

La parola font deriva dalla tipografia ed è stata poi traslata, nel corso degli anni, in ambito prettamente informatico. Per font si identifica sostanzialmente il tipo di carattere tipografico 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 davvero molto pochi e anche 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 big G.

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 senza dubbio il Roboto, il Lato, l’Open Sans e lo Slabo, ma al suo interno si possono trovare davvero fonts per tutti i gusti. Fatta questa doverosa premessa, vediamo con installare uno di questi citati fonts all’interno del nostro tema 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 la 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 nella tab EMBED e copiamo il primo codice, nel mio caso, non avendo scelto alcun peso, sarà questo

<link href=”https://fonts.googleapis.com/css?family=Roboto” rel=”stylesheet”>

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/miotema/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 dovremo settarlo all’interno del body tramite la seguente regola css

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

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.

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 è piaciuto questo articolo? Votalo!
[voti: 0 - Media voto: 0]

About Author

Mi chiamo Luigi Sabbetti e da circa dieci anni svolgo la professione di Web Designer. Profondamente amante della scrittura, mi piace condividere le mie conoscenze informatiche attraverso il mio sito web. Amo correre, guardare il mare e il buon cibo. Scopri di più nella mia