Google Font Directory è un nuovo progetto in beta di Google che permette di usare famiglie di Font non inclusi nella lista dei Font-Standard.

Come molti sviluppatori sapranno, durante la progettazione di un sito web, i font che dovranno essere indicizzati in un secondo momento devono essere di tipo testo e inclusi nella lista dei Font-Standard.

Google Font Directory è una directory di Font esclusivi, che tramite un codice HTML+CSS, avremo la possibilità di usarli senza preoccuparci di verificare se il font sia della famiglia Font-Standard.

Vediamo insieme come utilizzare queste API di Google sui Font.

Selezioniamo il Font che ci interessa, in questo caso proviamo Droid Sans, e andiamo a prelevare il codice per includere il carattere.

Come includere il Font?

HTML

Dovremo inserire il seguente codice tra i tag <head> e </head> della nostra pagina web

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

Inoltre se volessimo impostare lo stile bold, italico o bolditalico dovremo inserirlo nel codice in questo modo:

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>

CSS

Nel nostro foglio di stile CSS dovremo andare a richiamare il font usato Droid Sans.

h1 { font-family: 'Droid Sans', arial, serif; }

In questo caso stiamo indicando per i nostri h1 il font Droid Sans.

Quali sono i veri vantaggi?

Google ha introdotto questa nuova tecnica in quanto cerca di evitare che per inserire font speciali si usino delle immagini o script che possano rallentare l’ottimizzazione e l’indicizzazione di una pagina web.

Per quanto riguarda la compatibilità siamo coperti su Chrome, Firefox, Safari mentre su Internet Explorer poca nitidezza del font e Opera nulla.

Questo nuovo progetto potrebbe portare svariate migliorie per l’indicizzazione su caratteri ottimizzati anche se non Font-Standard.

Alternative?

Come vedremo al workshop Go!WebDesign durante il mio intervento, grazie ai CSS3 sarà possibile utilizzare font da noi scelto su qualsiasi macchina .

Questa tecnica sarà attuata grazie al modulo @font-face, purtroppo però attuamente oltre a non essere raccomandata dal W3C in quanto i CSS3 sono ancora in fase di definizione, non tutti i browser lo supportano.

Conclusioni

Nella directory attualmente sono disponibili solo una ventina di font, si spera che verranno integrati molti altri ancora.

Un’ottima mossa da parte di Google per l’ottimizzazione e indicizzazione di Font speciali.

Letture Consigliate per Fonts


Autore: Giuliano Ambrosio

Creative Strategist e Designer Freelance di Torino, fonda il blog JuliusDesign nel 2007, attualmente collabora con diverse agenzie su tutta Italia con le quali ha avuto modo di lavorare per diversi big brand.