Google Font Directory

venerdì, 27 agosto 2010

Da qualche mese google ha annunciato la creazione di un servizio per l’utilizzo dei fonts su web

stiamo parlando di

a differenza di typekit i font sono gratuiti e supportano le caratteristiche dei css3, inoltre consumerete pochissima banda dato che il richiamo del font viene fatto da google

Per inserire i caratteri all’interno del sito Internet, occorre seguire alcuni semplici passi.

Passo 1: scelta del font

Basta collegarsi al sito di Google Font Directory. dove basta scegliere il  font tra quelli disponibili.

Passo 2: incorporare il font nella pagina

Dopo aver scelto il font (in questo caso utilizziamo lo Reenie Beanie), bisogna cliccare su “Get the code”.

Verrà visualizzato il codice per incorporare il font nel vostro sito Internet. Basta copiare la riga nell’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=Reenie+Beanie' rel='stylesheet' type='text/css'>

Nel caso in cui il font si presenti con piu’ varianti ad esempio (Old Standard TT) per caricare sul sito anche le altre versioni del carattere, occorre inserire il codice che Google fornisce in Font variants and advanced techniques , ossia:


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

per ridurre i tempi di caricamento del font, inserite solamente le varianti che effettivamente utilizzate!

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 Reenie Beanie tutti gli h2 dei tag h1 della pagina dovremo inserire questo codice


h1 { font-family: 'Reenie Beanie', arial, serif; }

In pochi passi avrete il sito con un font in maniera semplice 🙂

la tecnica non è compatibile con i browser e le piattaforme : Opera, iPhone, iPad, iPod o Android un lista dei browser aggiornati la trovate qui

Lascia un Commento