Google Fonts. Personalizza il tuo sito con web font originali

Sappiamo quanto sia importante cercare di evitare le immagini (contenenti testi) nei siti web al fine di favorire l’indicizzazione delle pagine. I motori di ricerca infatti non leggono i testi presenti nelle immagini (anche se gli attributi alt e title risolvono in parte questo problema).

Con i web font i siti web sono cambiati. La scelta dei caratteri da utilizzare per le pagine internet non è più limitata, per cui il ricorso alle immagini non è più necessario (in linea di massima).

Se prima infatti il campo era limitato ai classici font installati sul computer degli utenti, grazie alla direttiva CSS @font-face qualcosa era già cambiato, ossia era possibile utilizzare qualsiasi carattere tipografico (salvo possedere la sua licenza d’uso), anche se la procedura di incorporamento del font era abbastanza macchinosa.

Rendere il Web più bello, veloce e aperto grazie a un’ottima tipografia.
Google Fonts

Poteva Google restare fuori da questo “mercato”?! Ovviamente no.
Google Fonts è una enorme raccolta di font rigorosamente open source che è possibile integrare nel proprio sito in maniera molto più semplice e veloce per i web designer.

Questo permette di creare una comunicazione personalizzata e che meglio si adegua alle caratteristiche del brand che promuove.

Come usare i Google Fonts

Il servizio di Google Fonts è gratuito, intuitivo e di facile comprensione, basta solo imparare poche righe di sintassi. Se ti stai chiedendo come utilizzare Google Fonts nel tuo sito, ecco come fare:

• collegati al sito Google Fonts;
• scorri la libreria per selezionare un font (o più di uno), utilizzando magari i filtri categorie, lingua e proprietà del font per circoscrivere la ricerca;
• puoi inserire il nome del font se sai già quale utilizzare, inserire un testo di preview per vedere il risultato, aumentare o diminuire la grandezza del font in preview;
• clicca sul font che desideri integrare;
• seleziona gli stili del font che vuoi inserire sul tuo sito.

Sul lato destro dello schermo si aprirà una finestra con le famiglie di font e gli stili selezionati. Quando siamo soddisfatti della nostra scelta clicchiamo sulla voce “embed” dove troviamo le istruzioni per incorporare il font nel nostro sito. A questo punto, come viene spiegato dobbiamo:

• inserire il link all’interno dell’head delle pagine del sito;
• inserire la regola font-family all’interno del file css.

Ovviamente conviene non esagerare con l’utilizzo di queste famiglie di font, perché rallentano progressivamente lo scaricamento della pagina. Più font e stili inserirò nella mia pagina, più tempo questa ci metterà per caricarsi.

Io utilizzo Google Fonts praticamente in ogni progetto web, e voi? Preferite utilizzare altre strade?

Articolo a cura di: Del Re Valerio
Dott. in Comunicazione e Pubblicità per le Organizzazioni. Sono l'ideatore del blog Robadagrafici.com e mi occupo di comunicazione visiva, grafica e web, per le aziende.