Come usare i Google Fonts su WordPress

Questo articolo è stato aggiornato in data 23 Dicembre 2019

Una delle risorse gratuite più utilizzate su internet per aggiungere i font su di un sito realizzato con WordPress sono, senza ombra di dubbio, i Google Fonts e, tramite questa guida, imparerai ad integrarli in modo semplice e veloce.

Quando inizi a sviluppare la grafica del tuo sito web non puoi esimerti dal cercare un bel font (chiamato anche carattere) da applicare a titoli e contenuto, per donargli un aspetto unico e d’impatto. Infatti un font è una delle caratteristiche principali di design che stravolge l’aspetto estetico del tuo sito e donano personalità.

Dove trovare e cosa sono i Google Fonts

I fonts di Google sono disponibili a questo indirizzo www.fonts.google.com, e ad oggi sono disponibili più di 900 font con licenza libera. Sul sito è presente un modulo di ricerca con dei filtri che ti permettono di trovare quello di cui hai bisogno.

Prima di spiegarti come integrare i Google Fonts sulla tua installazione di WordPress, vediamo le diverse tipologie di caratteri disponibili in modo da avere una panoramica completa e sceglierlo in base alle proprie esigenze.

I font sono suddivisi in 5 diverse categorie: Serif, Sans Serif, Display, Handwriting, Monospace. Ognuno di loro è ideale per un determinato testo e/o modo di scrivere.

• Serif. Fanno parte di questa categoria tutti quei fonts con degli elementi decorativi che allungano le stanghette/bastone delle lettere. Uno dei font più famosi che riprende questo stile è sicuramente il Times New Roman.
• Sans Serif. In questa categoria troviamo invece i fonts senza il tratto distintivo dei serif, ovvero gli elementi decorativi. Per farti un esempio il più tipico è l’Arial.
• Display. La leggibilità non è il punto cardine di questa categoria che fa delle decorazioni il suo tratto distintivo. Non consigliamo di utilizzarla su di un sito web in quanto l’esperienza dell’utente ne risentirebbe.
• Handwriting. Sono ottimi per i titoli in quanto simulano la scrittura a mano. Eviterei di inserirli nel contenuto perchè soffrono degli stessi problemi dei caratteri Display.
• Monospace. Utilizzati spesso per scrivere del codice di programmazione dato che hanno la larghezza delle lettere uguale per tutti i caratteri.

Inoltre tramite il filtro di ricerca è possibile filtrare i Google Font in più stili e varianti, tramite il filtro “Font Properties“

• Thickness. Con questo strumento si può personalizzare lo spessore, scegliendo tra fine, normale e grassetto, ovvero il font-weight di CSS.
• Slant. Questo filtro serve per l’inclinazione del tratto e varia in verticale, corsivo e obliquo, equivalente del font-style di CSS.
• Width. Qui imposti la larghezza del tratto.

Come riconoscere un font

Molte volte, navigando su internet o guardando un volantino, ci attrae il font utilizzato e magari vorremmo utilizzarlo per il nostro progetto. Riuscire a risalire al nome del font utilizzato ci permetterà di trovare la sua controparte su Google Fonts o magari di trovare proprio quel font sul sito.

Uno dei metodi più veloci e più semplici per poter riconoscere un font è andare su www.myfonts.com/WhatTheFont/. Questo sito web infatti permette di caricare un’immagine con del testo, ritagliare la parte desiderata e dopo averlo scansionato vi restituirà una lista con dei font simili. Ovviamente la qualità dell’immagine di partenza avrà un ruolo fondamentale.

Un piccolo suggerimento sta nel tagliare l’immagine con il solo testo da analizzare, in questo modo l’algoritmo di riconoscimento avrà vita più facile nel capire di quale font si tratta.

Consigli utili sui Google Fonts e WordPress

Quando stiamo scegliendo un nuovo font per il nostro progetto, la prima cosa a cui dobbiamo prestare attenzione, è la leggibilità. Molte volte infatti si pensa esclusivamente alla “bellezza” di un font tralasciando l’aspetto più importante. Un testo è fatto per essere letto e se non è facilmente accessibile l’utente abbandonerà il vostro sito.

Non usare troppi font! Ogni risorsa che carichi sul tuo sito WordPress dovrà essere scaricata dall’utente. Maggiori richieste portano a tempi di caricamento più lunghi. Il consiglio è quindi di caricare massimo due font Google, uno per i titoli e l’altro per il contenuto.

Non usare dimensioni troppo piccole, un testo piccolo comporta una difficoltà maggiore nel comprendere quanto scritto.

Come usare i Google Fonts su WordPress

Veniamo finalmente al punto in cui ti spiego come aggiungere i Google Fonts alla tua installazione di WordPress. Esistono diversi metodi per poter integrare i Google Fonts ed io te ne insegnerò due: uno per utenti più esperti utilizzando un Child Theme e l’altro più semplice con l’ausilio di un plugin. Se non sai cosa sono i Child Theme e come crearne uno ti rimando alla nostra guida esaustiva che ti permetterà di conoscere questo fantastico strumento.

Installare i Google Fonts tramite Child Theme

La guida si basa sul tema Twenty Twenty, ma è valida per qualsiasi altro template di WordPress. Innanzitutto controlla sempre tramite la documentazione del tema se sono già presenti i Google Fonts, altrimenti prosegui senza problemi.

Per prima cosa vai sul sito Google Fonts e scegli i font da installare sul tuo tema WordPress e tieni a portata di mano questa pagina, poi utilizza il file manager (spesso disponibile nel pannello del nostro hosting o anche servendosi di un software come FileZilla o simili) per dirigerti nella cartella /wp-content/themes/tweentytweenty-child.

In questa cartella, se hai creato correttamente il Child Theme, dovresti avere un file functions.php, aprilo per poterlo modificare ed inserisci il seguente codice:

function tweentytweenty_child_google_fonts() {
wp_enqueue_style( 'tweentytweenty-child-google-fonts', 'Inserisci qui il link che trovi su Google Fonts', false ); 
} 
add_action( 'wp_enqueue_scripts', 'tweentytweenty_child_google_fonts' );

Come recuperi il codice da inserire tra gli apici? Dirigiti nuovamente sul sito dei font di Google e seleziona il font (o più fonts) scelto (nell’esempio Roboto e Lora), in basso apparirà un box grigio, aprilo e all’interno troverai “Embed” e “Customize“. Tramite il secondo pulsante sarà possibile aggiungere i vari “pesi” dei font, aggiungiamone uno per font in modo da non appesantire il caricamento. Ora copiamo il link presente in embed e inseriamolo tra gli apici.

Fatto questo non ci rimane che aggiungere lo stile ai vari elementi che lo compongono nel file style.css presente nel child theme, come nell’esempio poco più avanti. Avrai bisogno di qualche conoscenza css in modo da applicare gli stili una volta caricati i font, se hai bisogno di aiuto con i css contattaci tramite la pagina di assistenza WordPress.

In questo caso, vogliamo applicare il font “Lora” sul testo di tutto il sito web, ma allo stesso tempo applicare il font “Roboto” al titolo del nostro sito web WordPress, per fare ciò dovremo incollare il seguente codice CSS nello style.css del nostro child theme:

body {
	font-family: 'Lora', serif;
}
.site-title a {
	font-family: 'Roboto', sans-serif;
}

Installare i Google Fonts tramite plugin

Se non hai dimestichezza con il codice di WordPress e vuoi una via più semplice ti suggerisco di utilizzare un plugin per inserire i Google Fonts sul tuo sito. Un plugin molto semplice da utilizzare ma abbastanza completo è Easy Google Fonts

Dopo averlo installato ed attivato troverai le impostazioni da settare in Aspetto > Personalizza > Typography. In questa sezione andrai a modificare i font delle varie sezioni del sito. È possibile cambiare il font utilizzato tra gli elementi <p> del testo ed i vari titoli (H1, H2, H3, H4, H5, H6).

Per ogni elemento avrai a disposizione tre tab: Styles, Appearance, Positioning. Attraverso Styles potrai scegliere la famiglia del font ed i stili (grassetto, sottolineato, ecc.). Con il tab Appearance potrai modificare il colore, lo sfondo, la grandezza, ecc. Mentre con l’ultimo tab, Positioning, potrai personalizzare ancor di più lo stile dell’elemento dandogli maggiore margine, padding o inserendo un bordo. I tab Appearance e Positioning ovviamente non sono essenziali e puoi tralasciarli.

Conclusioni

Leggendo l’articolo avrai sicuramente capito l’importanza dei font e quanto i Google Fonts siano utili per il tuo sito WordPress. Se questa guida è stata utile scrivetecelo nei commenti e fateci sapere quali sono i font che utilizzate sul vostro sito.