Crear una font-family a mb una font .ttf (@font-face)

dijous,17 de març del 2011

Entre les tendències actuals del disseny web hi destaca l’ús de fonts personalitzades. Per a fer aquest tipus de fonts, tradicionalment, calia fer una imatge amb les fonts desitjades. Amb l’arribada de les tècniques CSS3, que estan revolucionant el món del disseny web, es poden crear font-family a partir de les fonts que desitjem.

El seu ús és molt senzill. Primer de tot cal obtenir el fitxer .ttf desitjat. En podem trobar una gran quantitat a Internet. Anem a veure-ho amb un exemple pràctic.

Aquest blog, utilitza tres font-family pròpies. Els textos estan amb la font de sistema d’Ubuntu 10.10. Els que no useu aquest sistema operatiu us la podeu baixar gratuïtament. En aquest cas, al nostre fitxer CSS caldria definir un @font-face:

@font-face {
font-family: Ubuntu;
src: url(http://openpitu.com/wp-content/themes/starkers-html5/style/fonts/Ubuntu-R.ttf);
}

En aquest cas ja podem usar la font-family acabada de definir. En aquest cas ens podem crear una classe que definirà l’ús d’aquesta font-family:

.ubuntu_font{
font-family: Ubuntu;
}

D’aquesta manera podem usar qualsevol font que desitgem sense necessitat de crear imatges i podent crear així textos que usen aquella font dinàmicament. Per exemple