Guide

Come usare i Google fonts su WordPress

In questa guida ti presentiamo i font Google che puoi usare in WordPress. I font che usi sul tuo sito web hanno un importante impatto visivo sui tuoi visitatori. Scegli quello giusto!

Usare font Google WordPress

Chi mi conosce sa che i font sono una mia grande passione: ne esistono tantissimi, alcuni con differenze quasi impercettibili. Puoi quindi immaginare che gioia per me poter usare i Google Fonts su WordPress!

I font possono cambiare in modo drastico l’aspetto di un sito: un tipo di carattere adatto ad un certo argomento e tipo di pubblico, potrebbe essere completamente fuori luogo per un altro blog.

Ti basta dare una occhiata all’immagine qui sotto: stesso testo, stesso numero di righe, stesso sfondo bianco ed identica impaginazione.

Font a Confronto

Ciò che cambia è unicamente il font.

A sinistra Open Sans, un font moderno e sans-serif (approfondiremo le diverse tipologie di font fra qualche paragrafo). A destra Bad Script, un font che sembra replicare la scrittura a mano.

Noti come i Google font in sé comunicano qualcosa di completamente diverso?

Come usare i font Google su WordPress

Entriamo quindi nel vivo di questa guida, che ti spiegherà come sfruttare al meglio la risorsa dei font Google sul tuo sito WordPress.

Tipi di font

Dal momento che i font sono così importanti per creare un look in linea con i tuoi contenuti, iniziamo con una breve panoramica delle varie tipologie di caratteri disponibili online (uso come riferimento le categorie di Google Fonts, in quanto questa è la risorsa che useremo in seguito).

  • Serif: questa categoria include font con le grazie, ossia quei piccoli “allungamenti” alle estremità delle lettere;
    Font Serif
  • Sans-serif: questa categoria include caratteri senza grazie;
    Font Sans Serif
  • Display: generalmente, font creati per intestazioni di grandi dimensioni. I caratteri che rientrano in questa categoria hanno di solito meno spazio tra una lettera e l’altra;
    Font Display
  • Handwriting: caratteri che replicano la scrittura a mano

    Font Handwriting

  • Monospace: nei font monospace, tutti i caratteri hanno la stessa larghezza. Spesso, questi font ricordano lo stile della macchina da scrivere
    Font Monospace

Google Fonts

Prima di scoprire come usare i Google Font su WordPress, spieghiamo di cosa si tratta. Google Font è un cosiddetto repository, cioè, un sito dove i webmaster possono trovare risorse utili. In questo caso, centinaia di font che possono essere usati e scaricati gratuitamente.

Quando visiti Google Fonts, puoi effettuare una ricerca usando i filtri che si trovano sulla destra.

L’anteprima dei font verrà visualizzata nei riquadri all’interno della pagina. Per testare il font, puoi utilizzare i pulsanti nella parte alta di ogni riquadro. Il primo permette di selezionare se vuoi visualizzare una frase, un paragrafo, l’intero alfabeto o i numeri, oppure con Custom puoi scrivere il tuo testo di prova personalizzato.

Col secondo pulsante puoi selezionare lo spessore del carattere e la versione in italic (corsivo), se disponibile. Infine, usa lo slide per impostare le dimensioni del font.

Inserire Google Font su WordPress - preview del font

Ad oggi sono disponibili su Google Fonts ben 900 font differenti e ne vengono continuamente aggiunti di nuovi.

Non farti però prendere dall’entusiasmo: alcuni dei font disponibili sono belli ma risultano francamente difficili da leggere (approfondiamo questo punto nella prossima sezione).

Linee guida per la scelta di un font

Ecco alcune linee guida generali che ti consiglio di seguire nella scelta dei font per il tuo sito:

  • Lo scopo principale di un testo è essere letto! Quindi usa sempre font facilmente leggibili.
  • Prima di utilizzare un font sul tuo sito, effettua dei test di cross browser compatibility, ossia verifica che su tutti i browser, o almeno sui più diffusi (Google Chrome, Safari, Mozilla Firefox, Edge), il font venga visualizzato correttamente. Infatti, talvolta l’aspetto può variare leggermente.
  • Non usare più di due, massimo tre font su uno stesso sito. In genere fa un bell’effetto usare un font sans-serif per i testi e un font serif per le intestazioni.
  • Ciascun font (ogni singola variazione, non solo ogni famiglia) contribuisce a rallentare leggermente il tuo sito. Questo è un altro ottimo motivo per non farti prendere la mano.
  • Non usare dimensioni troppo piccole, che risulterebbero faticose da leggere. Piuttosto che sacrificare la facilità di lettura, ingrandisci la dimensione del font (ti suggerisco un minimo di 16 – 17 pixel).
  • Se c’è un font difficile da leggere ma che proprio ti piace, considera la possibilità di usarlo per alcuni elementi grafici, piuttosto che per il testo principale. Canva è un ottimo strumento per creare grafiche personalizzate ed include anche diversi font Google.
  • Degni di nota sono il font Roboto, sviluppato da Google per avere una visibilità ottimale ed unitaria su tutti i dispositivi, e Noto, un font relativamente nuovo sviluppato per supportare tutte le lingue. Non a caso, Noto è anche il font default di Twenty Fifteen, il tema ufficiale WordPress. Quindi, se vuoi evitare problemi di compatibilità tra vari dispositivi, scegli uno di questi due font ed andrai sul sicuro.

Ora che conosci un po’ meglio questo repository ed i font disponibili, andiamo al sodo e vediamo come usare i Google Font sul tuo sito WordPress.

Assistenza WordPress rapida e veloce con SOS WP

Come usare i font Google su WordPress

Quando crei il tuo sito, saranno usati i font default del tema che hai scelto, perciò dovrai andare a modificare questa impostazione.

Il modo più semplice per aggiungere i font Google al tuo sito WordPress è attraverso i plugin.

Nota! Se usi un tema premium di ultima generazione (per esempio, Avada), è probabile che i font Google siano già inclusi. Prima di installare un plugin, controlla se è già disponibile questa funzionalità nel pannello di configurazione del tuo tema.

Ci sono diversi plugin per aggiungere i font Google, quello che andremo ad usare si chiama Easy Google Fonts.

Questo plugin ha un buon numero di download, al momento è aggiornato fino all’ultima versione di WordPress ed ha anche ottime recensioni.

Per prima cosa, installa Easy Google Fonts sul tuo sito cercandolo dalla Bacheca in Plugin > Aggiungi Nuovo.

Easy Google FontsQuindi, naviga in Aspetto > Personalizza.

Qui noterai una nuova voce, chiamata Typography. In questa sezione potrai personalizzare i font per i selettori <p> – paragraph (cioè, il corpo principale del testo) e gli heading <h1>, <h2>, <h3>, <h4>, <h5> e <h6> (cioè, i titoli di varie dimensioni).

Suggerimento! La lista di font disponibili quando clicchi su Font Family è lunghissima. Non è però in ordine alfabetico; è invece già organizzata in modo da riflettere le categorie di Google Fonts.

Quando scegli la famiglia di font da utilizzare si sbloccheranno altre opzioni, a seconda delle variazioni disponibili per il font selezionato:

  • Font Weight/Style: grassetto, normale, light, ecc.
  • Text Decoration: sottolineato, barrato, ecc.
  • Text Transform: tutto maiuscolo, tutto minuscolo, ecc.

Selezionando la tab Appearance puoi anche personalizzare l’aspetto vero e proprio del testo a cui vengono applicate le regole su cui stai lavorando.

Le opzioni incluse sono colore, sfondo, dimensione del font e spazio tra i singoli caratteri.

Selezionando la tab Positioning, lavorerai invece sul posizionamento del testo. Cioè, su margini, padding e display. Se non conosci il significato di questi termini, ti consiglio di approfondire l’uso del CSS leggendo la guida introduttiva pubblicata sempre qui su SOS WP o, ancora meglio, il nostro video corso di CSS, che ti insegnerà a padroneggiare questo linguaggio per personalizzare al massimo il tuo sito web.

La conoscenza del CSS ti aiuterà anche se desideri personalizzare il font di elementi singoli. Per esempio, il titolo di un widget specifico o di una particolare sezione del tuo sito.

In questo caso, dalla tua Bacheca dovrai navigare in Impostazioni > Google Fonts e creare un nuovo Font Control.

Nel campo “Add CSS Selectors” inserisci i selettori a cui vuoi applicare il Font Control che hai appena creato (e spunta la voce Force Styles Override, per far sì che le regole definite con Easy Google Fonts vadano a sovrascrivere quelle del tuo tema).

Quando hai finito di creare il Font Control, torna in Aspetto > Personalizza. Ora, all’interno di Typography, troverai anche una sezione specifica per personalizzare il selettore che hai indicato.

Personalizzare i font (ma non solo) con questo plugin è veramente molto semplice. Le opzioni sono infinite.

Sperimenta il più possibile ma, al momento della decisione finale, non farti prendere troppo dall’entusiasmo.

Come usare Google Font aggiungendoli manualmente

Se non vuoi utilizzare un plugin, i font di Google possono essere anche aggiunti manualmente. Vai su Google Fonts e seleziona uno o più font che desideri utilizzare sul tuo sito. Basta cliccare sul simbolo “+” in alto a destra.

Selezione del Font Google

Apparirà il riquadro 1 (o più) Family selected. Aprila per scoprire come usare il font. Ci sono due sistemi: standard oppure import. Se scegli il metodo Standard, copia e incolla il codice del tag <link> nella sezione <head> della tua pagina. Poi, usa il CSS indicato in basso per applicare la regola agli elementi HTML.

Se utilizzi il sistema Import, copia e incolla il tag <style> sempre nella <head>. Il CSS da applicare sarà sempre lo stesso che hai visto prima.

Aggiungere Google Font su WordPress manualmente

Per utilizzare questi sistemi, sono necessarie alcune conoscenze di HTML, oltre che di CSS. Conoscere questi linguaggi ti può aiutare a personalizzare anche tanti altri aspetti del tuo sito, non solo i font. Ti suggerisco di consultare la pagina del nostro video corso di HTML per saperne di più.

Come usare i font Google anche sul tuo PC

Talvolta, potresti aver bisogno di usare i font Google anche sul tuo PC. Per esempio, per creare ebook o grafiche che abbiano un aspetto in linea con il tuo blog.

Anche in questo caso c’è una soluzione semplicissima e gratuita.

Si tratta di SkyFonts, un piccolo software da scaricare sul PC che ti permetterà di usare i font Google anche nei programmi desktop.

Clicca qui per scaricare subito SkyFonts.

Conclusione

Per concludere la guida su come usare i font Google su WordPress, ecco una breve selezione dei miei font Google preferiti (ovviamente, sono curiosissima di sapere quali sono i tuoi preferiti. Assicurati di lasciare un commento sotto al post).

  • Font Serif: Quando
  • Sanf-Serif: Lato
  • Display: Codystar, da usare con molta attenzione, in quanto se il testo è troppo piccolo potrebbe risultare difficile da leggere.
  • Handwriting: Pacifico, ormai usato ovunque ma molto carino
  • Monospace: Nova Mono, perché non è detto che i font monospace siano per forza noiosi.

Quali font userai per il tuo sito?

Alla prossima guida.

Vota questa guida

NOTA: Questa guida è stata aggiornata il

Registrare un dominio e uno servizio di hosting WordPress con SiteGround

Altre guide della stessa
categoria

41 COMMENTI
Commenta
  1. Katja

    Ciao Andrea!

    Io ho un piccolo problema che non sto riuscendo a risolvere. Ho scaricato il plugin Easy Google Font, ho modificato il font del testo ma non riesco a modificare il font relativo all’elenco puntato. Nel senso: paragrifi & headings hanno tutti lo stesso font, mentre le volte che decido di usare un elenco puntato in una parte del testo, questo risulta un font completamente diverso e più piccolo. E a me piacerebbe poter unificare tutto il testo (parlando di font & grandezza testo).

    Come posso fare per evitare di avere un testo disomogeneo?
    Grazie 1000

    Rispondi
  2. maurizio

    Ciao Andrea.
    Sto usando un template gratuito (FUTURIO) che ovviamente non implementa i google font nelle impostazioni.
    Vorrei aggiungere le stringhe manualmente senza l’uso di plugin ma dall’articolo non è chiaro in quale punto andare ad inserirli. Dove trovo l’head principale dove incollare il link di richiamo ai font?
    Grazie

    Rispondi
  3. Andrea

    Ciao! Ho istallato Easy Fonts e in vari temi Word Press (non in tutti però) pare apportare le modifiche ai font correttamente. Tuttavia, mentre nell’anteprima live mi mostra esattamente le modifiche man mano che le apporto, una volta pubblicate accade qualcosa di strano. Se provo ad andare alla pagina del sito con un altro PC o dispositivo, continua a dare i font di default come se la plugin non avesse alcun effetto, mentre solo se ci vado dal mio PC mostra quelli cambiati. Dove potrebbe risiedere il problema?

    Rispondi
  4. albert

    ho finito ora dopo 8 ore di guerra,..ma non riesco a cromatizzare il titolo dell’articolo..
    e a dargli il grassetto, e la cosa mi infastidisce.. e non trovo modo per cambiarlo.
    Si trovano i diversi colori ma non c’è l’header del titolo nella stringa mentre c’è il titolo..
    dell’header fuori stringa… prova a guardare? grazie.. http://www.archiram.com

    Rispondi
      • Alberto

        si ho risolto, ora vedo di trovare dei caratteri migliori, provo a vedere su css , il problema è che quando scrivi.. il carattere è fisso arial quindi non hai..la possibilità di percepire subito l’estetica dell’articolo, e non è possibile modificarlo dall’interfaccia di scrittura cioè dal box e se puoi farlo una cosa deve escludere l’altra..

        Rispondi
  5. Sonia

    Ok, grazie mille. Ma se si volesse importare in WordPress un font solo (es. a me interessa Tangerine) o un plugin per fonts in cui si sia sicuri di trovarlo? Grazie!!!!

    Rispondi