Google Web Fonts

Il metodo, forse, più semplice per usare i font personalizzati sul web è quello creato dalla "grande G" Google. Unica pecca: accontentarsi di qualche centinaio (per ora) di font a disposizione. Non è possibile, quindi, utilizzare un font dal proprio archivio (acquistato o free). I vantaggi: oltre all'archivio gratuito di font, con poche righe di codice avrete una soluzione cross-browser, funzionante anche sulle vecchie versioni di Internet Explorer!


Utilizzo

Dopo aver selezionato dal sito ufficiale www.google.com/webfonts il font, gli stili ed il set di caratteri che si vuole utilizzare nel vostro progetto, occorre includere il codice che Google vi indicherà, all'interno del tag <head> della pagina html. Ci sono 3 modalità di inclusione: Standard, @import e Javascript. Ad esempio, utilizzando il primo metodo per includere il noto font Lobster, dovremo scrivere:

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

A questo punto basterà usare nei vostri stili il nome del font, come nell'esempio seguente (è sempre bene specificare anche un font alternativo o di default):

h1 { font-family: 'Lobster', cursive; }
#titolo { font-family: 'Lobster', serif; }
.paragrafo { font-family: 'Lobster', sans-serif; }

 

Demo

Esempio di inclusione in una pagina web del font Lobster di Pablo Impallari, utilizzando Google web fonts.

 

Per commenti, scriveteci.