4/4/12

Google web Fonts: guia bàsica d'implementació

Vaig decidir fer servir les fonts de Google en un projecte i em vaig trobar amb un problema. Les fonts no s'aplicaven tal i com estava previst. La solució va venir de part de l'Edgar Seoane.

No hem de fer servir la manera que proposa Google en format Standard.

Si per exemple volem utilitzar la font Ropa Sans en les seves dues variants: 400 i 400 italic no hem de posar el que diu Google:
<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>

Hem de fer-ho via @import, amb una línia per a cada variant dins la fulla d'estils. O sigui:
@import url(http://fonts.googleapis.com/css?family=Ropa+Sans:400);
@import url(http://fonts.googleapis.com/css?family=Ropa+Sans:400italic);


 Després, allà on ho necessitem definim la classe CSS de la manera següent, per exemple:
#cap .menu01 { font-family: 'Ropa Sans', Arial, serif; font-style: italic; font-weight: 400}
#cap .menu02 { font-family: 'Ropa Sans', Arial, serif;font-weight: 400}


Comprovat en tots els navegadors i funciona correctament.
Gràcies, Edgar.