Nuovi font per un web più attraente! Ci pensa Google!
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:
Se ti è piaciuto l'articolo condividilo in rete! ;)
Ti potrebbe interessare anche:
- I migliori 15 font per web designer I font sono sempre uno dei tratti essenziali della Grafica e web design, quando si lavora su progetti di design che sia per il web o per la stampa...
- Google search stories – Racconta la tua storia con una ricerca creativa! Google Search Stories un nuovo servizio by Google creato per la creazione di video in modo automatico e creativo da pubblicare, non a caso, su YouTube. Con questo servizio...
- Convertire qualsiasi Font in un Sketch Font E’ da un pò di tempo che sul web va di moda il disegno a mano libera e uno delle carattarestiche più di tendenza utilizzate da molti web designer...
- Google Analytics e Flash – Tracking di un sito Flash (AS2 & AS3) Da un po’ di giorni alcuni utenti mi hanno scritto, descrivendomi le loro difficoltà ad utilizzare il tracking code di google con actionscript 2, in un vecchio post infatti...
- Google Analytics e Flash – Tracking di un sito Flash Rieccoci con un semplice tutorial ma che mi ha fatto dannare un po’ di giorni, perché non ne ho trovato uno che mi soddisfacesse. Oggi parliamo di come tracciare...
Loading ...
Ciao ti ho aggiunto su twitter..che ne dici di scambiarci un blogroll..col mio blog e il tuo?? Dagli un occhio..complimenti per il design…
si possono utilizzare font che non siano nella directory di google??