• Google Font Directory
• Google Font API

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à.

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:

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

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:

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400,700' rel='stylesheet' type='text/css'>

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

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:

h2 { font-family: 'Yanone Kaffeesatz', arial, sans-serif; }

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.

Related posts:

1. Come riconoscere i font utilizzati
2. Font Conference: guerra tra font
3. Google Art Project: il museo virtuale