Google Font: el catàleg tipogràfic web s’amplia.

Els programadors web tenim el problema que no podem utilitzar les fonts que desitgem en els nostres textos webs. Ens tenim que cenyir a les fonts universals en els ordinadors. Fonts com Tahoma, Verdana, Arial ens deixen un ventall petit de possibilitats tipogràfiques, és més, les tenim que utilitzar per tenir una bona sintonia amb SEO i Google.

Aquests anys, han sorgit solucions realitzades amb Javascript per mostrar en la nostra pàgina web les fonts que desitgem. Aquestes solucions, com Typekit, són de pagament i allotgen en un servidor les tipografies per la seva utilització.

Ara, Google ha tret un nou servei tipogràfic que amb un petit codi ens permet mostrar un directori de fonts més modern, alegre i funcional. Encara que aquest directori està definit per Google, les fonts són prou ben realitzades i modernes.

Podreu trobar el seu catàleg tipogràfic.

Alhora de la seva utiltizació, Google Font ens deixa un codi no introsiu, fàcil i compatible amb els nostres estils CSS. El simple fet d’incloure el codi en el nostre header:

I posteriorment en el nostre HTML:

<script src=”http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js” type=”text/javascript”>
</script>
<script type=”text/javascript”>// <![CDATA[
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
}
});
// ]]></script>
<!–
.wf-inactive p {
font-family: serif
}
.wf-active p {
font-family: ‘Tangerine’, serif
}
.wf-inactive h1 {
font-family: serif;
font-size: 16px
}
.wf-active h1 {
font-family: ‘Cantarell’, serif;
font-size: 16px
}
–>

// HTML

// CSS
h1 { font-family: ‘Crimson Text’, arial, serif; }
// @import
@import url(http://fonts.googleapis.com/css?family=Crimson+Text);

Ens permet d’una forma fàcil gestionar les fonts via CSS. Amb una bona utilització entrem dintre d’una etapa on les webs seran més atractives i els tipògrafs, més contents.

Més informació: Anieto2k