* Pod bilo koji font mislim na fontove koje legalno posjedujete 
.
U čemu je zapravo problem, pa problem je u tome da vi u teoriji možete staviti bilo koji font koji imate instaliran na svom računalu u dizajn vaše stranice. I to će sve super raditi, dok tu stranicu ne pogleda netko tko nema instaliran font koji vi koristite na svom računalu, i onda će se preglednik jednostavno prebaciti na svoj defaultni font, time narušavajući izgled vaše stranice. Tako da je do sad najbolja opcija bila da koristite web safe fontove: Arial, Helvetica, Times New Roman, Verdana, Georgia. Ovo su web safe fontovi samo zato što većina operativnih sustava dolazi sa ovim fontovima već instaliranim.
Da bi doskočili ovom problemu postoji nekoliko metoda, neke koriste JavaScript, neke koriste Flash ali ona koju ćemo mi obraditi u ovom tutorialu koristi @font-face selektor u CSS-u i ne koristi nikakve “teške” tehnologije poput JavaScripta ili Flasha. @font-face postoji već neko vrijeme i razvio ga je Microsoft, ali do nedavno nije bio podržan ni u jednom od popularnih web preglednika. Slijedi tablica trenutno podržanih preglednika:
| Preglednik | Najmanja verzija | Podržava |
|---|---|---|
| Internet Explorer | 4.0 | Embedded OpenType |
| Firefox (Gecko) | 3.5 (1.9.1) | TrueType i OpenType |
| 3.6 (1.9.2) | Web Open Font Format (WOFF) | |
| Opera | 10.0 | TrueType i OpenType |
| Safari (WebKit) | 3.1 (525) | TrueType i OpenType |
Formati fontova
Kao što možete vidjeti u tablici gore različiti preglednici podržavaju različite formate fontova. To su OpenType, TrueType, Embedani OpenType i Firefoxov WOFF iliti Web Open Font Format. Pošto se metoda koju ćemo ovdje obrađivati zasniva na tome da fontove koje koristite imate prisutne negdje na svome serveru, morati ćemo paziti da imamo sve verzije fontova prisutne, kako bi se ti fontovi mogli prikazati u većini preglednika. Da bi si olakšali posao koristiti ćemo odličan i besplatan web site: Font Squirrel
Font Squirrel
Font Squirrel je web sajt koji vam može ponuditi besplatne i neke komercijalne fontove koje možete koristiti na svojim web stranicama. Razlika između Font Squirrela i ostalih sajtova koji vam nude fontove je taj da vam Font Squirrel daje font u svim gore navedenim formatima i još uz to vam daje i CSS kod koji možete koristiti da bi vam se fontovi ispravno prikazivali na stranici.
Postoje 2 načina na koja možete koristiti Font Squirrel, prvi je da jednostavno sa njega skinete font koji vam se sviđa i onda ga primjenite na svoju web stranicu, a drugi je da iskoristite font koji već imate na svom računalu i pomoću Font Squirrela ga pretvorite u sve potrebne formate. Pri ovoj zadnjom metodi Font Squirrel će vam isto dati i CSS kod koji ćete koristiti da prikažete fontove na stranici.
Metoda 1 – preuzimanje fontova sa Font Squirrela
Korak 1
Posjetite Font Squirrel
Korak 2
Kliknite u glavnom izborniku link @font-face kits i sada ćete dobiti listu fontova za koje su već napravljeni @font-face kitovi sa svim potrebnim datotekama.
Ja ću odabrati font Matiz 1 pod kategorijom Display. Kada pronađete taj font samo kliknite na link ispod njega na kojem piše get kit.
Korak 3
Nakon što ste skinuli @font-face kit, napravite podmapu u mapi u kojoj vam se nalazi web stranica i nazovite ju fonts, u podmapu fonts raspakirajte .zip datoteku koju ste skinlai sa Font Squirrela. Ovo je lista datoteka koje be trebali dobiti sa Matiz1 @font-face kitom:
- demo.html
- Freeware License.txt
- Matiz.eot
- Matiz.svg
- Matiz.ttf
- Matiz.woff
- Matiz-cufon.js
- stylesheet.css
Matiz-cufon.js i demo.html možete odmah obrisati, te datoteke nam ne trebaju. Pogledajte još jednom listu datoteka, primjetite da svaka datoteka koja se zove Matiz ima različiti nastavak, to su formati fontova o kojima smo prije govorili.
Korak 4
Sada otvorite datoteku stylesheet.css i kopirajte sve što se u njoj nalazi u glavnu .css datoteku koju koristite za oblikovanje vaše web stranice. Kod bi trebao izgledati ovako:
@font-face { font-family: 'MatizRegular'; src: url('Matiz.eot'); src: local('Matiz'), local('Matiz'), url('Matiz.woff') format('woff'), url('Matiz.ttf') format('truetype'), url('Matiz.svg#Matiz') format('svg'); }
Korak 5
E sad moja pretpostavka je da vam se glavna .css datoteka nalazi u istoj mapi kao i ostatak datoteka koji čine vašu web stranicu. A pošto smo fontove postavili u mapu fonts (da nam se ne mješaju sa ostalim datotekama) moramo malo prilagoditi gore navedeni kod da nam čita datoteke iz ispravne mape. Taj postupak je vrlo jednostavan, samo moramo dodati fonts/ u svaku url deklaraciju. Url deklaracija samo pokazuje gdje se nalazi font kojeg ćemo koristiti. Kod bi vam na kraju trebao izgledati ovako:
@font-face { font-family: 'MatizRegular'; src: url('fonts/Matiz.eot'); src: local('Matiz'), local('Matiz'), url('fonts/Matiz.woff') format('woff'), url('fonts/Matiz.ttf') format('truetype'), url('fonts/Matiz.svg#Matiz') format('svg'); }
Korak 6
Jedino što nam sad preostaje je da jednostavno dodamo ovaj font na neke od elemenata na stranici ja ću to napraviti na elementu < h5 >. Znači sada pišemo CSS kod normalno, a kad hoćemo definirati koji font će neki element koristiti jednostavno dodamo MatizRegular u definiciju fonta. CSS kod bi trebao ovako nekako izgledati:
h5 { font-family: 'MatizRegular', Arial, Helvetica, sans-serif; font-size:18px; color:#333; }
Znači sve je isto kao da dodajte jedan od web safe fontova samo što MatizRegular stavljate pod apostrofe (‘). Isto tako definirate fallback fontove (Arial, Helvetica, sans-serif), ako korisnikov preglednik iz nekog razloga ne može renderirati @font-face fontove ili ne razumije tu naredbu.
Sada ćemo isprobati dali font radi tako da ćemo u HTML datoteku ubaciti:
<h5>Ovo je proba MatizRegular fonta</h5>
I trebali bi dobiti nešto slično ovome:
Ovo je proba MatizRegular fonta
Kao što vidite postupak je zapravo vrlo jednostavan, nakon što uključite @font-face selektor, ostalo sve radite kao da koristite običan web safe font.
Metoda 2 – izrada svog @font-face kita
Ova metoda je totalno ista kao i Metoda 1 jedina razlika je u prva 2 koraka, sve ostalo je identično. Ovu metodu ćete koristiti ako nemožete pronaći font koji vam se sviđa na Font Squirrelu ili ako vam treba font font koji podržava naše znakove, a većina fontova na Font Squirrelu ne podržava č,ć,ž,š,đ. Ovdje ću objasniti samo prva 2 koraka, ostali koraci su isti kao i kod prve metode.
Korak 1
Posjetite Font Squirrel i zatim u glavnom izborniku kliknite @font-face generator..
Korak 2
Sada kliknite na Add fonts gumb, i odaberite font sa vašeg računala kojeg želite koristiti na stranici. Font Squirrel će podići vaš font. Jedino što bi ovdje još mogli napraviti je da si odaberte koje formate fonta želite da vam font face generator generira.
Zadnja stvar je da kliknete kraj “Yes, the fonts I’m uploading are legally eligible for web embedding.” ovom opcijom potvrđujete da je font legalno nabavljen i da je dopušteno njegovo korištenje na web stranicama. Nakon toga Kliknite gumb “Download your kit”.
I to je to, ostatak je isti kao i u metodi jedan.
Zaključak
@font-face je odličan alat, koji može uljepšati vašu web stranicu sa lijepom tipografijom. Ali ipak trebate pripaziti, @font-face ne treba koristiti za prikaz normalnog teksta, može ga se tako koristiti ali nije preporučljivo. @font-face se većinom koristi za naslove u tekstu ili kao tipografsku dekoraciju. Isto tako trebate pripaziti na legalnost fonta kojeg koristite, znači nebi trebali koristiti ovu metodu ako nemate odobrenje za korištenje fonta ili ako font niste legalno kupili.
Nadam se da će vam ovaj tutorial pomoći pri izradi vaše sljedeće web stranice. Za sva pitanja koristite sustav komentiranja ispod.
