@font-face ili kako koristiti non-safe fontove na webu

Svi koji na netu provodimo više od ure vremena dnevno već smo umorni od Verdane, Ariala i Georgie, no dizajneri i developeri se još uvijek rijetko odlučuju korisiti non-safe fontove.  Razloga za to ima više – opća SEO napetost, pomanjkanje vremena , neznanje ili jednostavno lijenost.

Na Kroativu smo već pisali o SIFR-u , flash zamjenskim fontovima no sada u CSS3 postoji još jednostavnija i bolja opcija – @font-face.

Pa kako koristiti @font-face?

Najjednostavnije je koristiti online generator a naći ćemo ga na stranici  http://www.fontsquirrel.com/fontface/generator (slika1)

@font-face generator

označiti ćemo EXPERT a zatim SUBSETTING/ADVANCED SUBSETTING. Otvoriti će nam se dio gdje ćemo označiti LANGUAGE: Croatian i English (ili koji već trebamo-može više njih)

U desnoj koloni ćemo vidjeti popis fontova po grupama gdje moženo pronaći font koji želimo a zatim ga downloadirati  i spremiti u neku mapu na svoj pc. (Važno – font treba biti u posebnoj mapi jer se u generator ne može ubaciti direktno iz c:/windows/font  mape)

Na vrhu ćemo kliknuti na button ADD FONT i sa našeg računala odabrati svoj željeni font.

Na dnu forme označiti ćemo “BULLETPROOF SMILEY”

Zatim ćemo na dnu označiti da se slažemo sa uvijetima korištenja i downloadirati generirani file na svoje računalo.

Kada odzipamo preuzete dokumente vidjeti ćemo da smo dobili demo.html, stylesheet.css i naš font u 4 različita formata: .ttf, .eog, .svg i .woff. Sva četiri formata su nam potrebna za razne browsere.  U mapi gdje se nalaze ostali dokumenti naše web stranice otvoriti ćemo posebnu mapu i nazvati je npr. “font”. Unutra ćemo staviti naše fontove i stylesheet.

Zatim ćemo otvoriti  dobiveni .html file i sa njega kopirati ono što nam je potrebno u svoj .html file.  U “head” ćemo kopirati ovaj dio:

<style type=”text/css” media=”screen”>
.Notethis {font-weight: normal; font-style: normal; line-height:normal; font-family: ‘NotethisRegular’, “Times New Roman”, Serif;}
</style>

(“NotethisRegular” je naziv fonta koji sam ja koristila, a “Times New Roman” je font koji sam ja odredila da se prikaže u browserima koji  ne čitaju @font-face – vi ćete tu imati druge fontove)

Zatim ćemo u head ubaciti i poziv za css:

<link rel=”stylesheet” href=”font/stylesheet.css” type=”text/css” charset=”utf-8″>

Zatim ćemo dati klasu onom dijelu teksta ili naslovu koji će koristiti novi font. Npr:

<h1 class=”Notethis”>Naslov</h1>

I naš novi font će ugledati svijetlo dana 🙂

Naravno, ne treba zaboraviti dvije stvari – mapa sa fontovima imati će oko 160 kb te dodatno opteretiti našu stranicu pa je pametno koristiti samo jedan zamjenski font. Ukoliko želimo dva oblika istog fonta – npr regular i bold tada ćemo morati obje verzije fonta umetnuti u mapu i kodove.

Oni koji žele saznati više detalja mogu posjetiti http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ ili pogledati DEMO na mojoj stranici http://www.weberica.in/

Dobru zabavu 🙂