ferzip.com

Ti serve un programmatore sistemista freelance…contattami!

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>

<!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!


.

  • Share/Bookmark
Tag: css

Leave a Reply

Get Adobe Flash playerPlugin by wpburn.com wordpress themes