Una guida a Google Fonts, la libreria gratis per i font da usare online

Tempo di lettura : 8 minuti

È una raccolta di application programming interfaces, o più semplicemente API, che consentono agli utenti di utilizzare i caratteri Web sul proprio sito o applicazione, e più precisamente è la libreria che Google ha lanciato nel 2010 per mettere a disposizione di tutti, con licenza libera, una directory web interattiva per semplificare la scelta e la gestione di caratteri tramite CSS e Android. Oggi torniamo a concentrarci su un aspetto tecnico che può influire sulle prestazioni del sito, ovvero la scelta dei font, e scopriamo in particolare che cos’è Google Fonts e perché può aiutarci a ottimizzare il sito.

Google Fonts, la libreria di caratteri per il Web

Inizialmente noto come Google Web Fonts, il progetto Google Fonts nasce nel 2010 per abilitare e rendere più facile la scoperta e l’esplorazione dei font; il servizio è ospitato da Google e tutti i caratteri e la larghezza di banda sono gratuiti.

Dal punto di vista legale, la maggior parte dei font è rilasciata con la licenza open source, mentre alcuni sono rilasciati con la licenza Apache, e in entrambi i casi sono liberi anche per utilizzi a scopo commerciale; questa libreria è inoltre distribuita anche dai servizi SkyFonts e Adobe’s Edge Web di Monotype e Typekit di Monotype.

A partire dal 2021, il progetto si è esteso anche alle icone, con un primo set di icone materiali, simboli realizzati per le comuni esigenze di comunicazione che si possono scaricare sul desktop per impieghi in digitali per Android, iOS e Web.

A che serve Google Fonts

La directory Google Fonts ha rapidamente incontrato l’interesse degli utenti, tanto che si stima che i caratteri siano stati visti 54,199,093,508,380 di volte (ovvero, 54 bilioni di volte) e scaricati in oltre 20 miliardi di casi – in pratica, è come se ogni persona sulla Terra avesse scaricato ogni font almeno 2 o 3 volte.

Ad oggi, la raccolta comprende 1092 famiglie di caratteri che contribuiscono a “conferire personalità e prestazioni ai siti Web e prodotti”, come si legge sul sito del progetto, riferimento costante ormai per chiunque voglia scaricare font da utilizzare per realizzare un sito o progettare delle grafiche.

Questa libreria infatti è utilizzata da larga parte di web master e web designer che cercano soluzioni per i propri progetti professionali, e si è rapidamente imposta quindi come lo standard per la leggibilità dei progetti web – grazie anche al peso di Google come motore di ricerca e non solo, ovviamente.

Stando ad alcune statistiche, ci sono 42.781.913 siti Web live che utilizzano l’API di Google Font (quasi mezzo milione solo in Italia), che è usato da ben oltre la metà dei siti che rientrano tra i diecimila più visitati al mondo ed è al primo posto in Internet nella categoria Font.

Perché scegliere i Google Fonts

Il concetto alla base di Google Fonts è “semplicità”: come sappiamo, i web font possono avere un impatto sul tempo di caricamento di una pagina, ma anche sull’usabilità e sulla leggibilità dei contenuti. In una sola parola, influiscono sulla user experience, ma allo stesso tempo forniscono anche un’informazione immediata all’utente su ciò che il brand vuole comunicare e sul modo in cui si presenta, perché sono come il tono di voce di un contenuto.

Poter quindi contare su una libreria di migliaia di font Google – gratuiti, di altissima qualità e già pronti all’uso – è sicuramente un vantaggio enorme per chi sta lavorando a un progetto web e vuole curare anche l’aspetto grafico che assumerà la sua comunicazione.

Un altro aspetto che spiega il successo dei Google web fonts è la praticità: il contenuto di questa banca dati così estesa è ottimizzato per la corretta visualizzazione su qualsiasi supporto, device e piattaforma. Rispetto ai classici font, questi caratteri nascono già per la visualizzazione Web su monitor e display, e hanno quindi un carattere decisamente più moderno e fresco – che giova anche alla vista degli utenti.

Dal punto di vista tecnico, poi, Google assicura che il codice generato dalla piattaforma è già ottimizzato e permette ai server di inviare automaticamente il file più piccolo possibile ad ogni utente in base alle tecnologie supportate dal suo browser, usando ad esempio la compressione WOFF 2.0 quando disponibile. In questo modo, le pagine Web diventano più veloci per tutti gli utenti, in particolare nelle aree in cui la larghezza di banda e la connettività sono un problema, e “tutti possono godere della stessa qualità e integrità del design nei propri prodotti e pagine Web, indipendentemente da dove si trovino nel mondo”.

I vantaggi (anche SEO) dei Google fonts

Volendo provare a riassumere e schematizzare i principali vantaggi di Google Fonts, possiamo dire che offrono alcune caratteristiche positive non solo in termini di leggibilità ed estetica, ma anche per le performance dei contenuti, con possibili effetti benefici anche per la SEO.

In particolare, i font di Google sono:

• Esteticamente curati, accattivanti e attraenti, e quindi capaci di catturare l’attenzione degli utenti.
• Ottimizzati per il web: la library di Google Font assicura la compatibilità dei caratteri su tutti i dispositivi, piattaforme e supporti, per una lettura corretta e piacevole.
• Leggibili: per ogni famiglia di font c’è a disposizione anche un “peso” differente che permette di diversificare il contenuto testuale da quello degli heading, ad esempio, così da caratterizzare e ottimizzare la visibilità della pagina.
• Leggeri: i Google Fonts API sono compressi e ottimizzati, e quindi una pagina web che li utilizza ha una velocità di caricamento generalmente superiore rispetto a una che invece impiega caratteri diversi. Inoltre, Googlebot potrebbe scansionare più rapidamente le famiglie di font Google.
• Vari e versatili: il catalogo online è ricco e in continua espansione, e quindi tutti possono trovare un font giusto per il proprio progetto digitale.
• Gratuiti: al contrario di quelli disponibili su altre piattaforme, i caratteri di questa libreria sono gratis e liberamente installabili su ogni sito e applicazione.
• Compatibili: tutti i font presenti sul sito rispettano precisi standard della comunità di Google e assicurano alti livelli in termini di compatibilità.

Quali sono i font Google più usati e apprezzati

Può essere utile scoprire anche quali sono i cinque Google font più visualizzati e scaricati al mondo, così da intuire le caratteristiche ricercate dai designer (e apprezzate comunque dagli utenti).

Il primo posto della classifica è appannaggio di Roboto, un sans-serif offerto da Christian Robertson e impostato come font di sistema per Android: visualizzato quasi 17 bilioni di volte, si declina in 12 stili diversi (molti dei quali presenti anche in questi analytics di Google Fonts: ad esempio, Roboto Condensed è al sesto posto assoluto). Secondo la descrizione ufficiale, Roboto ha “una doppia anima”, perché a uno scheletro meccanico e forme in gran parte geometriche unisce curve amichevoli e aperte; il risultato è uno stile che permette di sistemare le lettere nella loro larghezza naturale, rendendo il ritmo di lettura più naturale.

Al secondo posto troviamo Open Sans, un font altamente leggibile creato da Steve Mattson, che Google stesso utilizza su alcuni dei suoi siti e annunci stampa e web: tra le caratteristiche principali ci sono un design con stress verticale, forme aperte e un aspetto neutro, ma amichevole.

La medaglia di bronzo va a Lato del polacco Łukasz Dziedzic, descritto come un carattere che, grazie a dettagli semirotondi delle lettere, offre “una sensazione di calore, mentre la struttura robusta dona stabilità e serietà”.

A completare questa top five sono Montserrat e Oswald: il primo è un font Google creato da Julieta Ulanovsky, composto da 18 stili diversi che vanno dal più leggero al più pesante; Oswald di Vernon Adams è invece una rielaborazione dello stile classico storicamente rappresentato dai caratteri sans serif Alternate Gothic, ridisegnati e riformati per adattarsi meglio alla griglia di pixel degli schermi digitali standard.

Come scegliere i Google Fonts

Il catalogo dei Google Fonts comprende oltre mille famiglie di caratteri, come detto, e questa vastità di scelta potrebbe complicare (o quanto meno allungare i tempi) la ricerca del font migliore per il proprio sito.

Per superare l’ostacolo, il sito ufficiale di Google Fonts consente di impostare diversi filtri per eseguire una ricerca mirata; in particolare, possiamo intervenire sui seguenti campi:

• Search: possiamo scrivere il nome di un font specifico, che conosciamo già.
• Preview Text: offre un’anteprima dell’effetto visivo del font, selezionando un testo base o inserendo una frase a nostra scelta.
• Font Size: imposta le dimensioni in pixel del testo mostrato in anteprima.
• Categories: filtra il tipo di font in base alle 5 categorie in cui ricadono tutti i font di Google
• Language: restringe la ricerca in base all’alfabeto di una lingua (latino, cinese, cirillico, arabo, ad esempio).
• Font properties: seleziona alcune proprietà del font, come spessore, numero di stili, larghezza e inclinazione.

Quali sono le categorie dei Google Font

È il caso di approfondire quali sono le 5 categorie dei Google Fonts, che definiscono lo stile delle famiglie di questi caratteri per il Web.

• Serif: come nella tipografia classica, questa categoria comprende tutti i font che presentano le grazie (anche dette bastoni o, in inglese, serif), vale a dire particolari allungamenti ortogonali alle estremità di ogni lettera.
• Sans-serif: è la famiglia di font che non ha le grazie e sono quindi cattereri privi dei tratti terminali.
• Display: sono caratteri solitamente pensati per intestazioni di grandi dimensioni, che di frequente hanno poco spazio tra una lettera e l’altra per un effetto di maggiore impatto.
• Handwriting: font che imitano la scrittura a mano.
• Monospace: famiglie di caratteri che hanno la stessa larghezza e che ricordano in qualche modo lo stile della macchina da scrivere.

Come aggiungere un Google font al sito

L’installazione locale dei Google Fonts su un pc avviene manualmente: è sufficiente visitare il sito di Google Fonts, selezionare il font e cliccare su Download per scaricare un font di Google (font singolo o tutta la famiglia) in formato zip. Per installare il carattere sul pc basta decomprimere la cartella, cliccare con il tasto destro del mouse sul file ttf e selezionare installa: ora possiamo usare gli stessi font del blog o del sito per creare ebook o grafiche in linea con lo stile Web.

Ci sono invece due metodi principali per aggiungere i font Google ai nostri progetti, in particolare a un sito WordPress: possiamo installare un plugin apposito a cui delegare il lavoro oppure procedere con l’installazione manuale.

Prima di tutto, se lavoriamo in ambiente WP dobbiamo verificare se il nostro tema non preveda già di default i Google fonts (situazione frequente con i temi premium di ultima generazione), controllando le funzionalità nel pannello di configurazione. Se questa opzione è assente, possiamo scaricare un plugin (ad esempio Easy Google Fonts o Google Fonts Tipography), installarlo sul pannello e procedere con la selezione del font preferito.

Se vogliamo usare l’API di Google Fonts per aggiungere caratteri alle pagine web in modo manuale non è necessario eseguire alcuna programmazione, perché serve solo aggiungere uno speciale collegamento al foglio di stile al documento HTML, quindi fare riferimento al carattere in uno stile CSS. In particolare, possiamo fare “copia e incolla” del codice del tag <link> nella sezione <head> della pagina, e poi usare il CSS fornito per applicare la regola agli elementi HTML.

Le best practices nella scelta dei web fonts Google

Abbiamo quindi capito cosa sono i Google fonts e come sceglierli e installarli sul nostro sito o blog, e possiamo quindi lanciarci nelle ultime riflessioni legate ai consigli per l’utilizzo di questi caratteri nei nostri progetti online.

Il font ha un ruolo importante nel definire visivamente lo stile che vogliamo dare al nostro sito e alle nostre pagine, che non può essere slegato dal pubblico target a cui pensiamo di rivolgerci. Gli studi di web design hanno messo in luce le “regole” legate a font, colori e forme in base ai settori di appartenenza – che si concretizza ad esempio, nell’uso del verde viene per le tematiche di natura, la salute e benessere – e ci sono delle “best practices” generali che valgono anche nella scelta dei font Google.

• I font devono essere innanzitutto di facile leggibilità, perché lo scopo fondamentale di un testo è essere letto.
• Come corollario, è bene ricordare che font di dimensioni troppo piccole potrebbero risultare faticosi da leggere: anziché sacrificare la facilità di lettura, è preferibile ingrandire la dimensione del carattere (orientandosi almeno intorno ai 16 – 17 pixel).
• Se troviamo un font che esteticamente ci piace, ma che risulta difficile da leggere, potremmo comunque usarlo solo per alcuni elementi grafici e non per il testo principale dei contenuti.
• Meglio eseguire dei test di cross browser compatibility prima di impostare il carattere per il sito, per essere sicuri che sia visualizzato correttamente su tutti i browser, o almeno sui più diffusi (Google Chrome, Safari, Mozilla Firefox, Edge), ed evitare che il suo aspetto possa variare leggermente.
• Non esagera con il numero di font sullo stesso sito, e limitarsi al massimo a due o al massimo tre stili diversi, anche perché ciascun font (ogni singola variazione, non solo ogni famiglia) contribuisce a rallentare leggermente il sito. Ogni carattere può infatti aggiungere fino a 400 kb al peso della pagina.
• La combinazione classica per ottenere un effettivo visivo piacevole prevede l’uso di un font serif per intestazioni e titoli e un font sans-serif per i testi. Ma con l’uso corretto della dimensione, del peso e del colore del carattere possiamo ottenere un effetto valido anche con un solo font.