Quante volte siamo stati vincolati dall’utilizzo dei soliti font compatibili per il web, perché gli unici permessi dallo standard browser, a scapito del design del sito stesso. Infatti i font che solitamente vediamo in giro, parliamo di Arial, Verdana, Times.. sono font incorporati all’interno del browser che utilizziamo per la navigazione.
Inizialmente i web font , che garantivano una buona compatibilità negli ambienti Windows /Mac erano veramente molto pochi. Con le ultime versioni dei sistemi operativi le possibilità di scelta sono un po’ aumentate. E google amplia questa possibilità introducendo una serie di nuovi font sicuramente utilissimi agli sviluppatori creativi i quali vogliono fare del proprio sito o blog un lavoro unico!
Il funzionamento è abbastanza semplice, google inventato una font directory e una font API che aiuterà lo sviluppatore a usare i font offerti, di alta qualità ed open source, nei loro siti.
La font directory offre per adesso 18 nuovi font tra qui quello Android utilizzato per l’omonimo sistema operativo, tra cui alcune varianti degli stessi.
L’utilizzo è semplicissimo con le API Font messe a disposizione da google, vediamo come.
Step 1: basta aggiungere questo script all’interno dei tag <head>:
<link href=’http://fonts.googleapis.com/css?family=Tangerine’ rel=’stylesheet’ type=’text/css’>
in questo modo, al momento della visualizzazione della pagina facciamo scaricare al browser anche il font google che poi andremo a richiamare nello stile del paragrafo.
Step2: adesso impostiamo il font per un paragrafo di testo nel solito modo, ovvero:
<h1 style=”font-family:’Tangerine’, arial, serif;”>
hello world
</h1>
e adesso dovremmo vedere gli effetti del nuovo font, applicati al testo! (scarica l’esempio in fondo all’articolo)
Per adesso, Google supporta solo le lingue Europee, ma molto presto pensa di ampliare il supporto anche per le restanti lingue.
Credo che sia un’ottima soluzione che in futuro se ampliata potrà portare molti vantaggi lato design nel mondo del web 2.0!
Di seguito puoi scaricare un esempio di file html con lo script che abbiamo descritto prima:
[download id=”1″ format=”1″]