Prilikom izrade i dizajna sajta, javlja se potreba za korišćenjem nestandardnih fontova, onih koji ne dolze preinstalirani uz operativni sistem. Postoji više popularnih tehnika koje možete iskoristiti, a jedna od njih je implementacija fontova koristeći CSS 3 i @font-face.

Osnovna sintaksa

Pre svega vam je potreban font koji ćete koristiti. Ukoliko već niste preuzeli neki font, jedna od popularnih lokacija za preuzimanje besplatnih fontova je http://www.dafont.com. Kada ga preuzmete, budite sigurni da ste pročitali i razumeli licencu fonta i to da li je dozvoljeno korišćenje na veb stranicama. Ukoliko je slučaj takav, kopirajte font u roditeljski (root) direktorijum vašeg veb sajta.

Za korišćenje @font-face tehnike pri implementaciji fontova, potrebno je samo par linija koda.

Otvorite vaš glavni CSS dokument i dodajte sledeći kod, poželjno pri samom vrhu (radi organizacije koda):

Hajde malo da se pozabavimo samim kodom.

Druga linija koda predstavlja identifikator imena fonta, tako da u praksi možete koristiti bilo koje ime, ali smatram da je najbolje da stvari budu jednostavne, te unesite pravo ime fonta.

Treća linija koda predstavlja lokaciju datoteke fonta na vašem veb sajtu.

Kako biste koristi font na nekom elementu sajta, na primer na h3 elementima, koristite sledeću sintaksu:

Podrška za različite veb pregledače

Morate računati na to da će @font-face biti vidljiv samo na brauzerima koji podržavaju CSS 3, tako da je moguće da neki korisnici starijih pregledača neće moći da vide vaše prelepe fontove. Dalje, ukoliko želite da font bude vidljiv u svim popularnim veb pregledačima (koji podržavaju CSS 3), moraćete dodatno da se potrudite. Naime, različiti veb brauzeri podržavaju, odnosne ne podržavaju različite tipove fontova.

• Gugl Hrom podržava TTF i SVG fontove.
• Internet Eksplorer podržava EOT fontove.
• Mozilini brauzeri podržavaju OTF i TTF fontove.
• Opera i Safari podržavaju OTF, TTF i SVG fontove.

Sigurno se pitate koji je najlakši način da prebacite (konvertujete) svoj font u druge tipove fontova.

Veb lokacija @font-face kit generator nam može pomoći u tom zadatku. Kada otvorite pomenutu stranicu, kliknite na Add Fonts i dodajte željene fontove. Kada se upload fontova završi, možete promeniti podešavanja tako što ćete odabrati opciju Expert. Ipak, smatram da će Optimal zadovoljiti potrebe većine korisnika. Budite sigurni da su fontovi (ili font) koji koristite dozvoljeni za implementaciju na veb stranicama, te čekirajte i kliknite na Download Your Kit.

Izlged @font-face kit generatora

Nakon što ste preuzeli  i raspakovali .zip arhivu, otvorite fajl stylesheet.css i kopirajte @font-face kod u vaš CSS fajl. Zatim kopirajte sve fajlove [ime-fonta]-webfont u roditeljski (root) direktorijum vašeg sajta. Sada bi trebalo da @font-face sa vašeg sajta bude vidljiv u svim popularnijim veb pregledačima.

Zaključak

Sada ste spremni da iskoristite pun potencijal @font-face tehnike i da na svoje sajtove postavite predivne fontove, koje korisnici mogu da selektuju, kopiraju, da se igraju sa njima…

Ipak, ukoliko ste nekim slučajem naišli na problem ili na nedoumicu, slobodno mi pišite preko komentara ispod, da zajedno rešimo problem.