Top Menu
Google Font

Google ha annunciato sul proprio blog la creazione di due nuovi servizi che permetteranno ai web designer di inserire all’interno delle proprie pagine alcuni font di alta qualità:


Esistevano già servizi simili sul web, ad esempio Typekit, ma Google ha il vantaggio di fornire i font gratuitamente, permettendone l’inclusione nelle pagine tramite le Google Font API.

I caratteri messi a disposizione da Google supportano le proprietà di CSS3 e di HTML5, come la rotazione e l’aggiunta di ombre.

Naturalmente i vantaggi nell’adottare questa tecnica sono molteplici. Ad esempio i font inseriti sono tutti OpenSource, quindi sono liberamente utilizzabili, mentre si avrà un notevole risparmio di banda perché i font verranno scaricati utilizzando la banda di Google e non quella del tuo server.

Per inserire i caratteri all’interno del sito Internet, occorre seguire alcuni semplici passi.

Passo 1: scelta del font

Collegati al sito Google Font Directory. Troverai l’elenco dei font disponibili. Al momento Google mette a disposizione 18 font di alta qualità.

Google Font: i caratteri disponibili

Passo 2: incorporazione del font

Dopo aver scelto il font (in questo caso utilizziamo lo Yanone Kaffeesatz), bisogna cliccare su “Get the code”.

Verrà mostrato il codice per incorporare il font nel proprio sito Internet. Basta copiare la riga all’interno dell’Head del sito e il font sarà subito disponibile.

In questo caso, il codice fornito è il seguente:

Ma, attenzione, questo codice serve solo a inserire nel proprio sito solo lo Yanone Kaffeesatz regular. Per caricare sul sito anche le altre versioni del carattere, occorre inserire il codice che Google fornisce Font variants and advanced techniques (Varianti font e tecniche avanzate), ossia:

Naturalmente, per ridurre i tempi di caricamento del font, inserite solamente le varianti ritenute necessarie.

Google Font: le varianti disponibili

Passo 3: uso del font nella pagina

Una volta caricato il font prescelto, bisogna modificare il foglio di stile Css.

Ad esempio, per trasformare in Yanone Kaffesatze tutto il testo contenuto nei tag <h2>, bisogna modificare in questo modo la classe:

Quindi i passaggi per rendere più bello il sito Internet sono semplici e molto veloci.

All’interno della documentazione di Google Font API è possibile leggere quali sono i browser supportati al momento. La tecnica non è compatibile con Opera, iPhone, iPad, iPod o Android.

Con il tempo il numero di caratteri disponibili sul sito di Google è cresciuto in maniera costante. Adesso – agosto 2015 – siamo arrivati a 700 caratteri pronti per essere utilizzati.

About The Author

Close