Google fonts, cosa sono e come usarli su WordPress.

Condividi
Condividi su linkedin
LinkedIn
Condividi su facebook
Facebook
Condividi su twitter
Twitter
Condividi su whatsapp
WhatsApp
Condividi
Condividi su linkedin
Condividi su facebook
Condividi su twitter
Condividi su whatsapp
Google fonts, cosa sono e come usarli su WordPress. Come scegliere i Google fonts e come usare i Google font sul tuo Sito WordPress.
Cosa troverai in questo articolo

Nel processo realizzativo di un Sito Web, durante la seconda fase identificata come sviluppo, senza dubbio la scelta e l’utilizzo corretto di un adeguato carattere per il testo contenuto è un fattore molto, molto importante.

Parliamo di font, quindi, ovvero un insieme di caratteri tipografici caratterizzati da uno stile grafico preciso e ben definito.

Fra i tanti disponibili in rete, sicuramente degni di nota nonché di utilizzo vi sono quelli messi a disposizione da BigG comunemente noti come Google Fonts.

Oltre a “pagare l’occhio“, la scelta di un font per un Sito Web, deve sottostare ad alcune considerazioni:

  • è simile a quello usato nella propria Brand Identity classica?
  • è sufficientemente leggibile?
  • è in linea con il look-and-feel del Sito Web?
  • è attinente all’anima del Brand?

Una scelta errata può decisamente danneggiare l’usabilità di un Sito Web. Vediamo, dunque, insieme cosa sono e come scegliere correttamente i Google Fonts per il tuo progetto.

Cosa sono i Google fonts?

Come detto, in generale, i fonts sono caratteri tipografici che possono essere usati anche e soprattutto per il Web. Tuttavia, prima di addentrarsi nello specifico dei Google fonts, credo sia utile fare una premessa tecnica.

Strumenti per la scrittura digitale, i fonts, sono caratteri che determinano lo stile e la visualizzazione di un testo. Genericamente e per comodità, vengono suddivisi in due macro-categorie: Serif e Sans Serif.

Il tipo generico font Serif

Dal francese Serif (con grazie), si identificano in questa categoria tutti quei caratteri che hanno alla fine dei tratti delle lettere, particolari terminazioni decorative.

Si trovano in qualsiasi raccolta standard legata a sistemi operativi, software desktop publishing e, naturalmente, web ed annoverano font classici, anche detti font di sistema, come il Times New Roman e il Georgia.

Times New Roman, il tipo generico font sans-serif
Times New Roman, il tipo generico font sans-serif

Il tipo generico font Sans Serif

Dal francese Sans Serif (senza grazie), si identificano in questa categoria tutti quei caratteri che non hanno alla fine dei tratti delle lettere, particolari terminazioni decorative.

Si trovano in qualsiasi raccolta standard legata a sistemi operativi, software desktop publishing e, naturalmente, web ed annoverano font classici, anche detti font di sistema, come l’Arial, l’Helvetica e il Verdana

Arial, il tipo generico font serif
Arial, il tipo generico font serif

Il repository di Google fonts

Google, per aiutare e favorire i Webmaster nella realizzazione di Siti Web Professionali unici e distintivi, ha creato un database online contenente centinaia di fonts creativi di ogni tipo, accessibili a tutti e usabili per qualsiasi esigenza.

Il repository di Google fonts, dunque, non è altro che una grandiosa e gratuita risorsa online in costante aggiornamento e dove sono contenuti caratteri di ogni genere e fattura.

Il loro utilizzo è quasi esclusivamente orientato al Web e, quindi, attraverso chiamate di stile su WordPress (vedremo dopo come) ma è possibile ottenere anche i file relativi in modo da poter usare il carattere scelto anche all’interno del materiale marketing del Brand al fine di creare una eccellente e distintiva linea tipografica ovunque.

Come si trovano i Google fonts?

La pagina di visualizzazione dei Google fonts è molto semplice ed intuitiva. Mostra filtri, controlli di ricerca, visualizzazione dark e molto altro e, dunque, cercare e trovare il carattere più congeniale alle nostre esigenze è davvero facile.

Modulo di ricerca dei Google fonts

Google fonts | Modulo di ricerca, opzioni e strumenti
Google fonts | Modulo di ricerca, opzioni e strumenti

Nel modulo appaiono subito chiaramente, 3 campi di filtraggio molto importanti.

  • Search (facoltativo) che è possibile utilizzare, ovviamente, solo quando il nome del font è già noto.
  • Sentence (facoltativo ma consigliatissimo), serve per simulare una parola o una frase a noi legata (ad es. il Claim del brand) al fine di vederne la resa “tradotta” con lo stile del font selezionato.
  • 40px (facoltativo) indica la dimensione di visualizzazione simulata dei font proposti.

Opzioni di ricerca dei Google fonts

A seguire, troviamo campi di filtraggio avanzati come:

  • Categories che ci aiuta a scegliere la tipologia grafica del font ricercato (Serif, Sans Serif, Display, Handwriting, Monospace). La cosa che probabilmente salta subito all’occhio e che qui, le categorie, comprese le due classiche, sono ben cinque:
    • Serif: categoria di font con grazie;
    • Sans Serif: categoria di font senza grazie;
    • Display: categoria di font utilizzati per intestazioni hero e header e di grosse dimensioni;
    • Handwriting: categoria di font che simulano la scrittura a mano libera;
    • Monospace: categoria di font dai caratteri con la stessa larghezza.
Google fonts | Modulo di ricerca, opzione categorie
Google fonts | Modulo di ricerca, opzione categorie
  • Language che ci aiuta a scegliere la tipologia del linguaggio verso cui è orientato il font.
Google fonts | Modulo di ricerca, opzione lingua
Google fonts | Modulo di ricerca, opzione lingua
  • Font properties che ci aiuta a scegliere le eventuali specifiche tecniche del font (quantità di stili, spessore, inclinazione, dimensione.
Google fonts | Modulo di ricerca, opzione proprietà
Google fonts | Modulo di ricerca, opzione proprietà

Come trovare il giusto Google fonts?

Come utilizzare al meglio questo modulo di ricerca? Bè, al netto di non avere già un font preferito e/o usato magari su qualche documento marketing, direi che il migliore suggerimento sia quello di improvvisare  simulando ricerche testuali.

Ad esempio, se il nostro Brand si occupasse di fitness, potrebbe tranquillamente starci che il carattere giusto sia un Sans Serif o addirittura un Display.

Tuttavia se il nostro core business ad esempio, fosse uno Yoga Studio, allora potrebbe essere necessario utilizzare un font Serif.

Prendendo quest’ultima ipotesi come caso studio, andiamo, quindi, nel modulo di ricerca, scriviamo nel campo Sentence il nostro Yoga Studio o comunque, un testo esemplificativo del nostro Sito Web e lasciamo tutto invariato il resto (in seguito andremo a filtrare le categorie).

Google fonts | Modulo di ricerca, Simulazione nome Brand
Google fonts | Modulo di ricerca, Simulazione nome Brand

Come vedi, 1048 su 1048 font disponibili e possibili. Tornando alla considerazione di cui sopra, cerchiamo di filtrare per categoria selezionando i fonts Serif.

Google fonts | Modulo di ricerca, Simulazione nome Brand con filtro categoria Serif
Google fonts | Modulo di ricerca, Simulazione nome Brand con filtro categoria Serif

Molto meglio, 215 su 1048 (ehm, scusa, il numero è sotto il menu a tendina 🙂 …). A questo possiamo sfogliare i risultati per vedere quelli che ad occhio possono sembrare più attinenti al nostro Brand o quelli che meglio ci trasmettono qualche sensazione positiva. Trovato quello giusto, non rimane che utilizzarlo correttamente.

P.S: per Yoga Studio, consiglierei il Google font Prata.

Google fonts | Modulo di ricerca, Simulazione nome Brand con filtro categoria Serif e selezione font PRATA
Google fonts | Modulo di ricerca, Simulazione nome Brand con filtro categoria Serif e selezione font PRATA

Come si usano i Google font su WordPress?

Abbiamo visto cosa sono i Google fonts e come si trovano, non rimane che vedere come si usano all’interno di un processo di realizzazione di un Sito Web Professionale.

Vi sono tre modalità precise attraverso le quali possiamo installare ed usare i Google fonts sul nostro Sito Web:

  • Attraverso l’ausilio di un tema professionale come Astra;
  • Attraverso l’utilizzo di marcatori CSS;
  • Attraverso l’uso di uno specifico plugin come Easy Google Fonts.

Per semplicità, sicuramente un plugin può risolvere facilmente la questione; tuttavia, considerando che per ottimizzare al massimo un Sito Web Professionale è opportuno usare meno software possibile e, considerando che i recenti temi professionali gestiscono tranquillamente i Google fonts, ti sconsiglio vivamente di scegliere la terza opzione.

Usare Google fonts con un tema professionale

Non ci sono mezze misure, per ottenere un prodotto professionale ci vogliono strumenti professionali. Ecco dunque che l’acquisto di un tema professionale, è quanto mai vitale. soprattutto oggi dove le nuove direttive Google Core Web Vitals la fanno da padrone per l’indicizzazione e il posizionamento SEO di un Sito Web.

Ve ne sono tanti, moltissimi e fra questi spicca senza dubbio Astra il miglior tema in assoluto per quanto riguarda vendite, prestazioni, velocità, sicurezza e supporto.

Neppure i cari e vecchi Avada, Enfold, Brooklyn, Be ecc… ma, torniamo a noi!

Una volta acquistato ed installato Astra (e comunque, lavorando sul Child Theme), ti basterà andare nel pannello di controllo del tema dal backend di WordPress

  • Aspetto > Personalizza

e poi scegliere

  • Globale > Tipografia

per gestire i font delle intestazioni e dei contenuti. Dal menu a tendina e sotto la radice Google, infatti, potrai selezionare il font prescelto come, nel caso di prima, Prata.

A questo punto, tutte le intestazioni (headings) saranno impostate con quel font, ma potrai in ogni caso, continuare a gestire singolarmente ogni Titolo.

Google fonts | Gestione font su tema Astra
Google fonts | Gestione font su tema Astra

Inutile dirti che qui, i vantaggi sono molteplici e vanno dalla facilità di implementazione, allo zero codice aggiuntivo passando per la gestione ottimizzazione assistita.

Meglio e più semplice di così … 😉

Usare Google fonts con marcatori CSS

Quando il tema non è efficace, il consiglio è di cambiarlo SUBITO anche pensando ad un restyling in funzione delle nuove direttive SEO Core Web Vitals.

Ciò detto, per implementare i Google fonts in questo caso, ci vengono incontro i marcatori CSS, e qualche piccolo passaggio manuale di implementazione. In buona sostanza, occorre inserire un codice di richiamo nell’head del nostro Sito Web affinché il browser, quando carica la pagina, capisca che deve prima richiedere questi font a Google per visualizzare correttamente il testo sul nostro Sito Web.

Per far ciò (cosa che un tema come Astra fa in automatico) servono la stringa generata da Google fonts e il file functions.php che si trova nel tuo tema figlio (Child Theme); ma andiamo con ordine.

Per prima cosa, sempre dal repository di Google fonts, una volta trovato il carattere che fa per noi (come ad esempio sempre il nostro Prata), clicchiamo sul link +Select this style che trovi a destra.

N.B: in questo caso Prata ha un solo stile all’attivo. Se, tuttavia, dovessi scegliere font con più stili, per usarli, dovresti selezionarli tutti.

Ti si aprirà una finestra a slide sulla destra contenente le indicazioni per usare il font sul Web e/o scaricarlo per uso locale.

Google fonts | Marcatori CSS da repository
Google fonts | Marcatori CSS da repository

A questo punto, copia la stringa

				
					<link rel="preconnect" href="https://fonts.gstatic.com">

				
			

e incollala temporaneamente in un file di testo (a meno che tu non voglia fare questa operazione dopo).

Ora, tramite cPanel o FTP, scarica ed apri il file functions.php che trovi nella cartella del tuo tema figlio e, quindi, presumibilmente in

  • /wp-content/themes/Avada-Child-Theme/

Editato e incolla al suo interno il codice seguente

				
					function wordpress_head_insert() {
?>
...
<?php
}
add_action( 'wp_head', 'wordpress_head_insert' );
?>
				
			

Al posto dei puntini, adesso incolla il marcatore CSS precedentemente copiato e incollato in un file di testo temporaneo ed ottieni il seguente codice definitivo.

				
					function wordpress_head_insert() {
?>

<link rel="preconnect" href="https://fonts.gstatic.com">

<?php
}
add_action( 'wp_head', 'wordpress_head_insert' );
?>
				
			

Salva, chiudi il file e caricalo nuovamente online sul tuo server.

A questo punto, la direttiva di utilizzo di quel preciso Google fonts è stata caricata correttamente. L’ultima operazione è quella che riguarda la dichiarazione di stile da inserire nel tuo foglio CSS personalizzatoesatto, quello che trovi nella stessa cartella del file funztions.php.

Quasi certamente il suo nome è style.css, quindi anche per lui vale lo stesso discorso, scaricalo in locale con FTP o editalo tramite cPanel.

Una volta aperto, inserisci queste direttive CSS facendo attenzione alle dichiarazioni.

				
					h1, h2, h3, h4, h5, h6 {
    font-family: 'Prata',serif;
}
				
			

Con questa dichiarazione, stai dicendo al browser che per visualizzare tutte le intestazioni, deve usare la famiglia di caratteri Prata di Google fonts.

Al netto di ciò ricorda che puoi sempre arricchire le direttive inserendo, ad esempio, lo spessore, la grandezza ed altre specifiche del font ma singolarmente per ogni titolo.

Anche se è corretto che tutti gli headings abbiano la stessa famiglia di font, la grandezza del carattere, al contrario, deve variare dall’H1 più grosso, fino all’H6 più piccolo.

				
					h1, h2, h3, h4, h5, h6 {
    font-family: 'Prata',serif;
}
h1 {
    font-size: 120px;
}
h2 {
    font-size: 80px;
}
h3 {
    font-size: 50px;
}

ecc..
				
			

Come si usano i Google fonts in locale?

Come detto all’inizio dell’articolo, per una corretta Brand Identity, ricorda sempre di essere omogeneo, riconducibile, riconoscibile e, quindi, di usare gli stessi strumenti di design e marketing ovunque ed allo stesso modo.

Per far questo, una volta scelto un font adeguato per il tuo Sito, ricorda di usarlo sempre anche in ogni comunicazione e/o grafica da adattare ad esempio sui canali Social.

Quindi, scarica il font dal repository di Google fonts, installalo sul tuo PC/Mac ed usalo in ogni programma di editing come Photoshop, InDesign, Illustrator ecc.

La procedura è molto semplice e il download del file compresso (.zip) è valida per entrambi i Sistemi Operativi.

Sempre nella solita schermata del font su Google fonts, accedi al Selected family e clicca (questa volta) su Download all per scaricare il file compresso contenente i file in formato TTF da installare.

Google fonts | Marcatori CSS da repository
Google fonts | Marcatori CSS da repository

Come installare Google fonts su Windows?

  • Decomprimi l’archivio .zip scaricato;
  • Apri la cartella decompressa creata contenente il font;
  • Clicca col tasto destro sul file .ttf e seleziona la voce installa.

Come installare Google fonts su Mac?

  • Decomprimi l’archivio .zip scaricato;
  • Apri la cartella decompressa creata contenente il font;
  • Clicca due volte sul file .ttf (si apre una nuova finestra).
  • Clicca Installa font.
Google fonts | Installazione font su MAC
Google fonts | Installazione font su MAC

Accorgimenti sui Google fonts

I Google fonts, decisamente rendono la vita più semplice a qualsiasi Webmaster anche in ottica di una corretta brand Identity. Facili da trovare e semplici di installare, ampliano di molto lo stile e la bellezza percepita di un Sito Web Professionale.

Tuttavia, esistono alcuni accorgimenti che è bene sapere al fine di non incappare in un uso scorretto di questi fonts.

  1. Stile unico: cerca sempre di usare lo stesso font ovunque rappresenti il tuo Brand;
  2. Less is more: cerca di non esagerare mai. Anche se capita, non è consigliato l’uso dello stesso font per titoli e contenuti così come non è consigliabile utilizzare font diversi per ogni singolo titolo, contenuti ed altre intestazioni. Due sono più che sufficienti.
  3. Fonts leggibili: cerca sempre di usare font che siano leggibili e chiari in ogni situazione e su qualsiasi dispositivo.
  4. Ottimizzali: essendo assets (risorse) esterni che devono essere caricati ogni volta che si apre il Sito Web, cerca di ottimizzarli sempre attraverso l’uso di un generatore di cache come WP Rocket e verificando che vi sia sempre la direttiva SWAP nella chiamata al fonts.

I Google fonts che ti consiglio

La ricerca del font corretto è quanto meno pratica soggettiva e dipendente dal Brand, tuttavia è possibile stilare una lista di Googe fonts decisamente accattivanti e usabili (quasi) ovunque.

Voilà … la mia lista 🙂 

  • Roboto: font Sans Serif, forse il più conosciuto ed usato.
  • Roboto Condensed: font Sans Serif versione a caratteri con spazi stretti, particolarmente adatto ai testi dei contenuti;
  • Roboto Slab: font Serif versione con grazie molto piacevole ed adattabile;
  • Montserrat: font Sans Serif molto corposo e conosciuto, particolarmente adatto a grosse intestazioni Hero;
  • Oswald: font Sans Serif corposo ed accattivante per l’uso di intestazioni;
  • Lato: font Sans Serif pulito, chiaro e particolarmente adatto per i testi dei contenuti.
  • Patua One: font Display moderno e usabile per varie tipologie di attività;
  • Prata: font Serif molto elegante e moderno rispetto al classico Times New Roman.

Conclusioni

Rimane davvero poco da aggiungere 🙂 Se hai problemi nell’utilizzo dei Google fonts o se hai particolari curiosità, sarò ben lieto di aiutarti.

In ogni caso, prima che tu me lo chieda, ti voglio lasciare anche una chicca. Magari ti sarà capitato di atterrare su un Sito Web ed esclamare -“Wow! Che bel font hanno usato qui. Chissà come si chiama e dove posso trovarlo!“-

Ora, è vero che da Inspector con un click sul tasto destro è possibile ricavarne il CSS relativo e capire di che font si tratti ma non tutti hanno lo skill per farlo ed ecco perché ti suggerisco la soluzione perfetta: Font Ninja.

Questo semplice ma utilissimo tool add-on per Chrome, ti aiuta ad analizzare e reperire qualsiasi informazione su qualsiasi tipologia di font che appare sul Web. Ti basta istallarlo e richiamarlo ogni volta che sarà richiesto.

La tua curiosità sarà ripagata perfettamente. 🙂

Condividi su linkedin
Condividi su facebook
Condividi su twitter
Condividi su whatsapp
Gian Luca Partengo

Gian Luca Partengo

Professionista del Web e del Marketing da oltre 20 anni. Ha lavorato per importanti Agenzie e Aziende italiane e ha creato e seguito passo a passo il Brand di numerosi Clienti. Oggi sviluppa progetti altamente professionali a partire da un'analisi sullo stato di salute di un Sito Web e della sua SEO Organica, fornendo anche consulenza a privati e aziende.

Potrebbero Interessarti anche ...

MAIN PARTNERS

Get in Touch

Ci sono molti modi per iniziare una conoscenza o rimanere in contatto e BRiDWEB ti mette a disposizione i migliori: modulo di contatto, e-mail, WhatsApp o chiamata.
Scegli tu quale usare.

Hai qualche domanda particolare?

ASK ME ON Quora!

Ciao sono Gian Luca.
Se hai qualche dubbio, domanda o problema, puoi usare la piattaforma di Domande e Risposte più usata al mondo.

Accedi e ponimi direttamente la tua domanda.