disign | Tipografia per web, API Google | a digital sign for a best design!
A digital sign for a best design

Articolo stampato da http://disign.improntedigitali.it/tipografia-per-web-api-google-189-3-1.html

© Luca Frassineti

Css tips and tricks 3.788 visualizzazioni

Tipografia per web, API Google

28/06/2011

Non solo Cufon, di cui ho parlato qui, permette di gestire font non di sistema sul web!
Come si può vedere, anche Google ora offre una API WebFont completa.
Innanzitutto scegliamo il font che desideriamo utilizzare (da qui) e poi aggiungiamo nell'head del documento html la riga di embed del font stesso (nell'esempio che segue ho scelto il Redressed):

link href='https://fonts.googleapis.com/css?family=Redressed(and)v1' rel='stylesheet' type='text/css'


L'API di Google genererà il  CSS specifico in modo da poter utilizzare direttamente il font nella nostra pagina.
Sarà solo necessario inserire nel nostro CSS la dichiarazione di uso del font:

#wrapper { font-family: 'Redressed', arial, serif; }


Esiste un'ulteriore opzione avanzata, attraverso l'uso di un Javascript che evita l'effetto flash (il ricaricamento del testo con il carattere pescelto nel caso il link all'Api si completi dopo il caricamento della pagina stessa), comunemente chiamato FOUT,  rendendo il testo non visibile fino all'effettivo caricamento del font prescelto.
Un'ampia documentazione la potete trovare qui.

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 


Questo sito è totalmente privo di pubblicità, se volete sostenere questa inziativa, potete scegliere di fare una piccola donazione libera:


© 2009 - 2024 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.