Usare font diversi nelle pagine web google fonts
Le nuove Google Font Directory sono delle API fornite dalla grande G che permettono di creare dei siti con dei font diversi dal solito, compatibili con tutti i sistemi operativi con poche righe di codice.
Sul sito ufficiale di google [ http://code.google.com/webfonts ] possiamo trovare la lista di font, per ora non molto fornita ma di sicuro in rapida crescita.
In sostanza basta incorporare il JS del font desiderato e aggiungere un piccola riga di css
ecco un primo esempio
basta inserire questa line negli header
e questo di css, volendo anche in modalita in-line
h1 { font-family: 'Reenie Beanie', arial, serif; }
ed il risultato sarà cosi
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">www.ferzip.com
ecco il codice che lo genera
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”><html> <head> <title></title> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″> <link href=’http://fonts.googleapis.com/css?family=Reenie+Beanie’ rel=’stylesheet’ type=’text/css’> </head> <body> <h1 style=”font-family: ‘Reenie Beanie’, arial, serif;”>www.ferzip.com </h1> </body></html>
Per rendere ancora più bello il nostro font possiamo usare questo tool sempre fornito da google per formattare meglio i CSS
http://code.google.com/webfonts/preview#font-family=Reenie+Beanie
buon divertimento con i nuovi font!
.
Tag: css
Channel on Metacafe