Google Fonts su WordPress: come utilizzarli

Google Fonts su WordPress: come utilizzarli

Google Fonts racchiude una serie di font che si possono utilizzare con licenza open source, in genere anche per progetti di natura commerciale. Vuoi mettere i Google Fonts nel tuo sito in WordPress? Questo è il tutorial che fa per te: imparerai molti modi per installare i Google Fonts su WordPress. Vengono infatti solitamente inclusi su varie tipologie di siti, ed il supporto per WordPress è generalmente garantito seppur, di fatto, con tre modalità diverse.

Per includere i Google Fonts su WordPress ci sono tre possibilità. PS: i programmatori possono integrare i Google Fonts direttamente nel theme child, ma questa procedura non sarà qui considerata per brevità.

Installare un plugin per i Google Fonts

In genere le prime volte facevo abbastanza confusione da questo punto di vista, perchè molti plugin del genere sembrano effettivamente tutti uguali tra loro. Alcuni plugin gratis che trovate nel repository di WP sono abbastanza confusionari e sono soprattutto poco intuitivi, mentre altri non fanno altro se non aggiungere l’opzione Google Fonts a WP, che poi potrete trovare su Aspetto, Personalizza come spiegato al secondo punto.

Plugin di WordPress consigliati per i Google Fonts sono, ad esempio, i seguenti.

Easy Google Fonts fa esattamente quanto ho scritto, cioè aggiunge l’opzione direttamente al theme e questo, alla lunga, io lo trovo come opzione più pratica e veloce. All’interno poi avrete la possibilità di impostare:

  • un Google Fonts per gli heading del sito, quindi gli H1, H2, ecc.;
  • uno per i paragrafi, gli span ed i div;
  • uno per i link;
  • uno per le liste

Non usate più di due o tre Google Fonts differenti, ovviamente: in genere infatti è consigliato di non eccedere nelle variazioni per evitare un effetto sgradevole a livello visivo o, se vogliamo, da “lettera anonima”. Una regoletta pratica ulteriore, inoltre, dice che graficamente rende bene se usate un classe sans-serif per il testo dei paragrafi e un serif per gli heading.

Google Fonts direttamente supportati nel theme

In questo secondo caso dovete andare, da backend, su Aspetto e poi su Personalizza: se il theme supporta i Google Fonts, sarà possibile impostarli da una delle opzioni sulla sinistra. Ecco un esempio tratto da un theme che supporta i Google Fonts (nello specifico si tratta di Zara).

Nota: se il tuo theme attuale non dovesse supportare i Google Fonts, puoi cercarne ed installarne un altro che supporti questa caratteristica, cercando tra i theme gratuiti consigliati.

Google Fonts installati manualmente in WP

In genere qui vi dicono sempre di modificare il theme, di creare un plugin voi stessi e così via. Le cose in realtà sono parecchio più semplici: integrare manualmente i Google Fonts è più facile di quello che potreste pensare. In genere faccio così: installo il plugin Simple Custom CSS & JS, che è davvero molto comodo per fare code injection e inserire patch ai temi con HTML, CSS e JS dove normalmente non sarebbe possibile.

È davvero comodo da usare per un motivo preciso: per attivare e disattivare gli snippets di codice basta un click, senza impazzire a copia-incollare il codice non si sa bene dove, ogni volta. Grazie ad esso, inoltre, installare i Google Fonts in WordPress è questione di pochi click:

  1. Cliccate sul font di Google che volete (Select this style)
  2. Poi fate click su Embed in alto a destra;
  3. Cliccate su <link> se non fosse già selezionato;
  4. Copiate il codice proposto (ad esempio <link href=”https://fonts.googleapis.com/css2?family=Roboto:ital,[email protected],300&display=swap” rel=”stylesheet”> )
  5. Dal plugin Simple Custom CSS & JS selezionate Nuovo e poi HTML;
  6. Incollate il markup proposto al punto 4
  7. Salvate e pubblicate il codice
  8. Adesso avete inserito il Google Font scelto, e dovrete utilizzarlo attivamente nel sito: selezionate sempre dallo stesso plugin Nuovo e poi, qeusta volta, CSS. Per fare questo dovrete conoscere un minimo di CSS, ovviamente, e saper usare almeno i selettori di basi + conoscere la sintassi più semplice.
  9. Inserite il nome del selettore seguito dalla regola CSS (CSS Rules) che trovate nella casella di testo dei Google Font, ad esempio h1{font-family: ‘Roboto’, sans-serif;} imporrà un font Roboto su tutti gli H1 del vostro sito
  10. Salvate l’opzione e avete fatto!

Tipi di Google Font: un breve approfondimento

Google Font offre vari tipi di carattere che tende a suddividere in categorie (categories), ognuna delle quali possiede uno o più font. Il tutto sulla base delle caratteristiche grafiche che possiedono: ad esempio ci sono i sans serif che corrispondono ai caratteri “senza grazie” (senza allungamenti o modifiche alla fine dei caratteri) oppure, al contrario i font della class serif (con grazie). In genere la classificazione dei Google Fonts, che potete trovare sul sito ufficiale:

fonts.google.com

è suddivisa come segue.

Nota: per vedere Google Fonts in italiano si può provare ad aggiungere ?hl=it dopo l’URL, che quindi diventerebbe fonts.google.com/?hl=it – ma questa opzione, al momento non sembra funzionare. Pare che ad oggi insomma non sia possibile visualizzare nel proprio browser Google Fonts in italiano.

Vediamo pertanto le tipologie di font di Google e le differenze tra ognuna di esse.

Font serif

Questa classe di font contiene tutti quelli con grazie, quindi quelli che possiedono alle estremità degli allungamenti ortogonali detti, per l’appunto, grazie. Quel tipo di forma spigolosa, peraltro, è dovuta storicamente ad un’esigenza pratica, ovvera quella di scolpire i caratteri ad esempio nel marmo, per cui le grazie derivavano esattamente da questo.

Font sans serif

Sono i font senza grazie, che in genere vengono molto utilizzati per i testi sul web. Sono considerati leggeri e rapidi da caricare, e possiedono diversi gradi di leggibilità.

Font display

Possiedono un impatto visivo molto diretto, e si possono usare per scritte brevi molto leggibili. In genere dentro Google Fonts potete testare il font e verificarle la leggibilità.

Font handwriting

Questa classe di font imita, invece, la scrittura a mano. Un esempio in Google Font potrebbe essere sss.

Font monospace

Il font tipico della scrittura dei terminali di comando, in cui sostanzialmente ogni carattere ha la stessa larghezza degli altri: questa aiuta i raffronti, le misure di simmetria e in alcuni casi esalta la leggibilità. In questo video, infine, trovate un esempio pratico di tutti i font che abbiamo descritto.

View post on imgur.com

Quale dei Google Fonts scegliere per il proprio sito?

In genere dipende molto dal vostro gusto estetico e questo, sebbene si possa addestrare, non si insegna. Sicuramente valgono alcune regolette pratica prima che visuali o teoriche: il testo deve essere leggibile. Se usate un handwriting dentro un testo di paragrafo (ed a volte anche in un titolo) il risultato potrebbe anche piacervi (de gustibus, insomma), ma non è detto che il vostro visitatore riesca a farlo. Per cui usate Google Fonts che siano leggibili, testateli con cura e sottoponete la lettura a qualcun altro prima di installarli: è importante avere un giudizio di altri per queste cose, e non affidarsi troppo al proprio sentirsi “artisti” oppure ispirati.

Fate anche il cosiddetto cross-browsing: verificate insomma che il testo, oltre ad essere leggibile, lo sia anche su vari dispositivi come tablet, PC e telefoni, e che i vari browser non distorcano la forma del carattetere rendendolo male a schermo (a volte succede). Un altro occhio importante va dato alle proporzioni del font: è bene che ci sia il corretto proporzionamento e che il flusso di testo risulti armonizzato e proporzionale. In genere per la leggibilità minima bisognerebbe andare dai 12px ai 14px minimo come dimensione ma, ovviamente, molto dipende dalla risoluzione del dispositivo, che può cambiare e che non è prevedibile: motivo per cui i test vanno fatti con dispositivi anche vecchi, per valutare così il “caso peggiore”.

1 voto


Informazioni sull'autore

Salvatore Capolupo

Consulente SEO, ingegnere informatico e fondatore di Trovalost.it, Pagare.online, Lipercubo.it e tanti altri. Di solito passo inosservato e non ne approfitto.