Come usare i font Google su WordPress

Usare font Google WordPress

Da mesi aspettavo con trepidazione il momento giusto per scrivere la guida su come usare i font Google su WordPress. Non potrei essere più entusiasta di condividerla con te e con tutti gli altri lettori di SOS WordPress.

Chi mi conosce sa che i font sono una mia grande passione: ne esistono tantissimi, alcuni con differenze quasi impercettibili.

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 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).

  • Font serif: questa categoria include font con le grazie.

Font Serif

  • Font 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

Ho già menzionato Google Fonts. Si tratta di 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 sinistra.

Puoi visualizzare i font in anteprima cliccando sulle varie tab che vedi in alto (Word, Sentence, Paragraph e Poster).

Puoi anche modificare le dimensioni del font di anteprima e, cliccando il simbolo a sinistra del bottone “Add to Collection”, vedere tutti i caratteri disponibili per la famiglia selezionata (un tipo specifico di font è detto famiglia. All’interno di una stessa famiglia ci sono un numero di varianti: per esempio, grassetto, normale, light, eccetera).

Come usare i font Google su WordPress

Ad oggi sono disponibili su Google Fonts ben 667 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:

  • Prediligi la chiarezza e la facilità di lettura. Sempre.
  • Prima di iniziare ad usare un font sul tuo sito, testa come viene visualizzato sui vari browser (cioè, Google Chrome, Internet Explorer, Mozilla Firefox e Safari). La maggior parte dei font hanno, infatti, un aspetto leggermente diverso a seconda del browser utilizzato.
  • Non usare più di due, massimo tre font su uno stesso sito. Solitamente, funzionano bene le accoppiate font sans-serif per il corpo del testo e font serif per i titoli.
  • 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.
  • 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, l’ultimo tema ufficiale WordPress.  Quindi, se vuoi evitare problemi di coerenza tra vari dispositivi, scegli uno di questi due font ed andrai sul sicuro.

Ora che conosci un po’ meglio il repository Google Fonts ed i font disponibili, andiamo al sodo e vediamo come usare diversi caratteri anche sul tuo sito WordPress.

Come usare i font Google su WordPress

Quando crei il tuo sito, saranno usati i font default del tema che hai scelto.

Il modo più semplice per aggiungere i font Google al tuo sito è 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 heading 1, 2, 3, 4, 5 e 6 (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 WordPress.

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 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: Codystarda 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.

Forza, ora tocca a te. Fammi sapere quali font userai per il tuo sito.

Alla prossima guida.

Chiara Buzzi

Chiara Buzzi

Chiara è una blogger a tempo pieno. Esperta di content marketing, aiuta imprenditori e liberi professionisti a sfruttare la rete per promuovere online la loro attività. Quando non sta lavorando sul web, Chiara ama leggere riviste e cucinare, ed ha una strana ossessione per tutto ciò che riguarda il mondo del beauty.

PROMOZIONE HOSTING WORDPRESS SITEGROUND

SiteGround - Miglior hosting per Wordpress
27 commenti
  1. dice:

    non funziona lo stesso :(
    OK, proviamo così:
    paragrafo è uguale a p
    maggiore paragrafo class uguale virgolette .firma virgolette minore LA MIA FIRMA maggiore / minore

    vediamo se cosi va bene :)

    Rispondi
  2. dice:

    :( :( Il post non accetta i caratteri del paragrafo firma, provo a scrivere con underscore

    _la mia firma_

    Quindi tutti gli underscore sono in più :)

    Grazie

    Rispondi
  3. dice:

    Ciao Chiara, dopo aver installato il plugins ho creato il font-control .firma
    Inserisco il selettore : text-shadow: 4px 4px 4px #aaa;
    Da Personalizza->Typographi vedo la mia classe e edito il font che mi interessa
    A questo punto nel mio articolo vado a scrivere la firma in questo modo :
    La mia firma

    Sembra che non vada bene :(
    Sai dirmi cosa può esser che non va ?
    Grazie

    Rispondi
  4. dice:

    Salve, grazie mille per l’articolo innanzitutto, era proprio quello che cercavo. Purtroppo c’è un piccolo problemino: ho installato Easy Google Fonts ed ho cambiato il font nel mio blog, ma non è cambiato interamente. Il corpo del testo sì, ma i paragrafi puntati e numerati sono diversi dal normale testo (si vedono col carattere predefinito del blog).

    Come faccio a risolvere?

    Rispondi
    • dice:

      Ciao Andrea,
      che tema stai utilizzando? Probabilmente c’è una regola CSS che sovrascrive l’utilizzo del font per i paragrafi puntati e numerati.
      Un saluto!

      Rispondi
      • dice:

        Ciao Andrea, scusami se rispondo ad un tuo commento risalente al 13 Maggio ma non riesco a visualizzare nè il mio nè tantomeno la tua risposta di ieri in merito ad Easy Google Fonts. Tornando alla questione, si, mi riferisco al plugin, e la cosa assurda è che in locale funziona tutto alla perfezione (riesco a vedere i Google Fonts), mentre online, come ho già scritto in precedenza, riesco a visualizzare solamente la lista degli Standard Web Fonts. Sono registrata su Altervista e ho creato il mio blog WordPress proprio da lì, e nella mia ignoranza sto pensando che il problema possa essere collegato in qualche modo proprio ad Altervista. Non so che altro pensare sinceramente.

        Rispondi
  5. dice:

    Ciao Chiara,
    grazie per l’aiuto, una domanda però: io riesco a cambiare solo il font relativo a Paragraphs per tutto il resto non “vedo” alcuna modifica :(

    Rispondi
  6. dice:

    ciao Chiara e grazie per il prezioso aiuto e la semplicità con cui riesci a rendere le informazioni accessibili, solo una domanda, nella mia lista Font Family compaiono solo una dozzina di possibilità, quelle standard dalla A di Arial alla V di Verdana. Dovendo creare un sito in stile giapponese come posso utilizzare un font più particolare?
    grazie ancora e complimenti!

    Rispondi
    • dice:

      Ciao Astolfo! Grazie a te per il commento.

      Hai installato il plugin Easy Google Fonts? Quando navighi in Aspetto > Personalizza > Typography > Default Typography e clicchi Edit Font, nel menu Font Family dovresti prima trovare la lista di font semplici, come hai scritto. Se però continui a scorrere dovresti vedere una lista chiamata Google Serif Fonts (e poi a seguire Sans Serif). Qui troverai tutta la lista dei font Google. Sul tuo sito non appare così? (assicurati di selezionare All Subsets in Script/Subset).
      Fammi sapere se trovi il font che stai cercando!
      Chiara

      Rispondi
      • dice:

        ciao Chiara e grazie, purtroppo non compare nessun Google Serif Fonts nè in pc nè in mac, uso wordpress 4.3, se possibile potrei inviarti i codici di accesso al sito?

        Rispondi
        • dice:

          Ciao Astolfo, per curiosità quale browser usi? Ti consiglio di usare Chrome aggiornato all’ultima versione. Un’altra domanda: vedi la lista con tutti i font Google però questi non vengono visualizzati correttamente quando li selezioni, oppure non vedi proprio la lista?

          Rispondi
          • dice:

            utilizzo sia Mozilla che Chrome, in entrambi la lista di font Google non compare proprio, lasciandomi a disposizione i classici Arial ecc.. sono riuscito a cambiare grazie ad Use Any Font il carattere alle pagine ma vorrei riuscire a farlo anche per i titoli.
            grazie ancora!

            Rispondi
            • dice:

              Ciao Astolfo,
              Forse abbiamo trovato il problema. Se usi Altervista, molto probabilmente ci sono delle limitazioni che non permettono l’utilizzo di tutte le funzionalità dei plugin. Ti consiglio di provare a rivolgerti direttamente al supporto di Altervista e chiedere se è possibile (con il tema che stai utilizzando) fare questa modifica, e con quale plugin.
              Un’altra cosa importante: non abbiamo approvato il tuo commento contenente le credenziali di accesso al sito (non sono quindi apparse online). Per motivi di sicurezza, non possiamo lavorare direttamente sui siti degli utenti. Come precauzione, ti consiglio di cambiare quanto prima la password di Altervista ed in futuro di stare attento a non condividere le credenziali su siti web e/o nei commenti! :-)
              Se hai altre domande, non esitare a scriverci.

              Rispondi
  7. dice:

    Ciao Chiara., grazie per l’articolo e per le conoscenze che metti a disposizione. Ti chiedo un consiglio: ho scaricato ed installato Easy Google Font come da te suggerito insieme all’altro plugin. Il problema è che non capisco come si possa cambiare il font della sezione titoli del tema. Sono riuscito a modificare il font del testo dell’articolo, ma non quello del titolo. Dove sbaglio? Non riesco proprio a capire. Grazie mille.
    Marco

    Rispondi
    • dice:

      Ciao Marco!
      Grazie a te per il commento.

      Per modificare i titoli, devi lavorare sui selettori “Heading 1″,”Heading 2”, eccetera.
      Quando navighi in Aspetto > Personalizza, espandi la sezione Typography > Default Typography. Qui potrai configurare i font per le varie dimensioni di titolo.

      Se le tue modifiche non risultano sul sito live, per prima cosa cancella la cache del browser. Se usi uno strumenti di caching come WP Super Cache, cancella anche la cache del sito.

      Se ancora non vedi le modifiche, probabilmente il tuo tema usa un selettore CSS diverso da h1, h2, ecc. In questo caso, dovresti identificare il selettore ed inserirlo nel campo “Add CSS Selectors” del Font Control (se sei alle prime armi con il CSS, dai un’occhiata a questa guida https://sos-wp.it/guida-css-wordpress/)

      Fammi sapere se queste soluzioni ti sono utili. Se hai ancora problemi non esitare a scrivermi ;)
      Chiara

      Rispondi
  8. dice:

    Ciao Chiara,
    complimenti per il post! Volevo farti una domanda, ho acquistato il tema Enfold e vorrei cambiare il carattere del menù.
    Come devo fare?
    Grazie,
    Marco

    Rispondi
  9. dice:

    Innanzitutto per essere il tuo primo post te la seii cavata benissimo. IO un web deisgner freelance e devo dire che i fonts suggeriti da te sono quelli che spesso utilizzo io.
    Un articolo veramente ben fatto.
    Grazie

    Rispondi
    • dice:

      Ciao Salvatore,

      Grazie mille per il commento… non è il mio primo post però mi fa non meno piacere che l’articolo ti sia piaciuto :)

      Ci sono altri font che secondo te dovrebbero essere menzionati?

      Grazie ancora e buon lavoro!
      Chiara

      Rispondi

Lascia un Commento

Vuoi partecipare alla discussione?
Fornisci il tuo contributo!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *