VINX Programació Web, Barcelona
669 344 302   vinx@vinx.info

Divendres, 21 de Gener de 2011

Utilitzar fonts no comunes en els css

Aprèn a personalitzar encara més la teva pàgina web

Si ets un webmaster, més d'una vegada t'hauran demanat utilitzar en una web alguna tipografia que molt poc probablement estaria instal·lada en els ordinadors dels visitants.

Per solucionar aquest problema, alguns opten per crear imatges amb la font desitjada, pràctica que solc desaconsellar atès que es perden possibles paraules claus de cara als cercadors, a part de restar agilitat a les actualitzacions posteriors de la web.

La solució més efectiva la trobem utilitzant la propietat font-face de les fulles d'estils (css), i en aquesta aplicació online: Font-Face Generator.

Pugem la font desitjada donant-li al botó "add font", acceptem les condicions i pressionem "download your kit": se'ns obrirà un .zip amb la font convertida a diferents formats perquè sigui compatible amb la majoria de navegadors, i per descomptat les instruccions per inserir la font en la web.

Serà alguna cosa semblat a aquest codi css:

@font-face {
font-family: 'DroidSansMonoRegular';
src: url('DroidSansMono-webfont.eot');
src: local('
Droid Sans Mono Regular'), url('DroidSansMono-webfont.woff') format('woff'), url('DroidSansMono-webfont.ttf') format('truetype'), url('DroidSansMono-webfont.svg#webfontVHHYtszH') format('svg');
font-weight: normal;
font-style: normal;
}

.estil {
font-family:'DroidSansMonoRegular';
}

Actualització Març 2016: com és lògic amb el passar dels anys certs trucs es tornen obsolets, avui el millor servei per incrustar en una web fonts no comunes i lliures de drets, és sens dubte Google Fonts.

 

« Veure tots els articles

Deixa'ns la teva opinió:






Comparteix-ho


De què es parla en aquesta web?

Fem servir cookies pròpies i de tercers per analitzar els teus hàbits de navegació. Si continues navegant considerem que acceptes el seu ús. OK | més detalls