Zlatno pravilo: Autorska prava
Zamisli da radiš savršenu web stranicu. Pronašao si predivan font, preuzeo ga i stavio na sajt. Sve izgleda super, zar ne?
STOP!
Baš kao i glazba, filmovi ili videoigre, fontovi imaju svoje autore i zaštićeni su autorskim pravima.
Ne smiješ samo preuzeti bilo koji font i staviti ga na svoju web stranicu.
Svaki font ima svoju licencu (dozvolu) koja točno kaže što s njim smiješ, a što ne smiješ raditi.
Besplatne licence (Open Source)
SIL Open Font (OFL)
Vaš najbolji prijatelj! Najčešća licenca. Dozvoljava vam da font besplatno koristite na webu, mijenjate ga i dijelite dalje.
Apache License 2.0
Super licenca! Dopušta vam da font koristite čak i u komercijalne svrhe (npr. ako radite web za klijenta i to naplatite).
GNU GPL
Besplatna je, ali ima "kvaku": ako mijenjate font, vaš novi dizajn također mora biti besplatan za sve pod istom licencom.
Komercijalni fontovi (Oni koji se plaćaju)
Nekada klijent želi jedinstven font koji se mora kupiti. Tu morate biti jako oprezni, jer jedna kupljena licenca ne vrijedi za sve!
Desktop licenca
Dozvola za instalaciju fonta na tvoje računalo. Koristi se isključivo za Word, Photoshop, izradu plakata ili vizitki.
ZAPAMTI: Ovu licencu NE SMIJEŠ koristiti za web stranice!
Web licenca (Webfont)
Ovo je ono što vam treba za web! Služi isključivo za korištenje fonta na stranicama pomoću CSS pravila @font-face.
Cijena web licence često ovisi o: broju pregleda stranice, broju domena i trajanju.
Fontovi s tvog računala?
NE smiješ ih kopirati!
Ako pronađeš font poput Calibri ili Comic Sans u mapi svog računala, ne smiješ ga preuzeti i staviti na svoj web server. To je kršenje autorskih prava jer ti fontovi imaju samo Desktop licencu.
SMIJEŠ ih "prozvati" u kodu
Ako u CSS-u samo napišeš font-family: Arial;, to je u redu. Ne kradeš font, već samo govoriš pregledniku posjetitelja: "Ako imaš Arial, iskoristi ga". To nazivamo Web Safe fontovima.
Formati fontova: Brzina je bitna
WOFF2 (Preporučeno!)
Apsolutni pobjednik i vaš prvi izbor. Ima najbolju kompresiju (datoteke su male) i web stranica će se učitati nevjerojatno brzo. Podržavaju ga svi moderni preglednici.
WOFF (Dobar plan B)
Ima dobru kompresiju i široku podršku. Često ga u CSS stavljamo kao rezervu- ako posjetitelj ima stariji preglednik, učitat će se WOFF.
TTF / OTF ("Teškaši")
Klasični formati za računalo. Na webu ih koristimo samo kao zadnju opciju za jako stare preglednike jer velike datoteke usporavaju web stranicu.
EOT (Zastarjelo)
Format isključivo za prastari Internet Explorer. Danas ga više nitko ne koristi i slobodno zaboravite na njega!
Ubacivanje fonta: @font-face
Kada napokon imaš legalan font u pravom formatu, moraš ga "upoznati" sa svojim CSS-om.
Pametan trik je prvo ponuditi woff2, a tek onda woff kao rezervu!
Trik za profesionalce: font-display
Određuje kako se tekst ponaša dok se tvoj font još učitava. Presudno za dobru brzinu weba!
| Vrijednost | Što se događa dok se font učitava? | Kada koristiti? |
|---|---|---|
| swap | Tekst se odmah prikazuje običnim fontom. Kad se tvoj učita, zamijene se. | Većina slučajeva- tekst je uvijek odmah vidljiv! |
| block | Tekst je nevidljiv (do 3 sekunde) dok se font ne učita. | Samo za ikone fontove (bolje prazno nego čudno slovo umjesto ikone). |
| fallback | Kratko blokiranje (~100ms), zatim se koristi obični font do učitavanja novog. | Idealan balans između izgleda dizajna i brzine učitavanja. |
| optional | Tvoj font će se koristiti samo ako se uspije učitati iznimno brzo. | Kada su performanse apsolutni prioritet weba. |
I za kraj...
Kada programirate web stranicu, uvijek prvo provjerite Google Fonts. Svi fontovi tamo su 100% legalni za web, besplatni za korištenje, a Google vam automatski daje najbrži WOFF2 format i gotov CSS kod!
—Najbolji savjet za početnike