Licenciranje
web fontova

Smijemo li koristiti bilo koji font na webu? Sve što trebaš znati o autorskim pravima, licencama i ispravnom korištenju fontova.

01 — Zlatno pravilo

Autorska prava

Fontovi nisu slobodni za preuzimanje — imaju svoje autore, baš kao glazba ili film.

Baš kao i glazba, filmovi ili videoigre, fontovi su zaštićeni 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.

02 — Besplatne licence

Open Source licence

Najčešće besplatne licence koje ćeš susresti pri izradi web stranica.

SIL Open Font (OFL)

Najčešća licenca. Dozvoljava ti da font besplatno koristiš na webu, mijenjaš ga i dijeliš dalje.

Apache License 2.0

Dopušta korištenje u komercijalne svrhe — npr. ako radiš web za klijenta i to naplatite.

GNU GPL

Besplatna, ali s "kukom": ako mijenjaš font, tvoj novi dizajn također mora biti besplatan pod istom licencom.

03 — Plaćeni fontovi

Komercijalni fontovi

Jedna kupljena licenca ne vrijedi za sve. Postoje dvije vrste licenci i ne smiju se miješati.

Desktop licenca

Dozvola za instalaciju fonta na računalo. Koristi se isključivo za Word, Photoshop, plakate ili vizitke.

Ne smije se koristiti na webu

Web licenca (Webfont)

Ovo je ono što trebaš za web. Koristi se putem CSS pravila @font-face. Cijena ovisi o broju pregleda, domena i trajanju.

Ovo treba za web

04 — Lokalni fontovi

Fontovi s tvog računala?

Postoje dva scenarija — jedno je zabranjeno, a jedno je potpuno u redu.

Ne smiješ ih kopirati. Fontovi poput Calibri ili Comic Sans imaju samo Desktop licencu. Stavljanje na web server krši autorska prava.

Smiješ ih "prozvati" u kodu. Ako u CSS-u napišeš font-family: Arial;, to je u redu — samo govoriš pregledniku da ga iskoristi ako ga korisnik ima. To su Web Safe fontovi.

05 — Formati datoteka

Formati fontova

Koji format koristiš direktno utječe na brzinu učitavanja stranice.

WOFF2

Preporučeno. Najbolja kompresija, najmanji fajl, podržavaju ga svi moderni preglednici. Uvijek ga stavljaj na prvo mjesto.

WOFF

Plan B. Dobra kompresija i široka podrška. Stavlja se kao rezerva za starije preglednike.

TTF / OTF

Zadnja opcija. Klasični formati za računalo. Na webu ih koristimo samo za jako stare preglednike jer su datoteke velike.

EOT

Zastarjelo. Format isključivo za stari Internet Explorer. Više ga nitko ne koristi.

06 — CSS implementacija

Ubacivanje fonta: @font-face

Kada imaš legalan font u pravom formatu, moraš ga registrirati u CSS-u. Uvijek prvo ponudi woff2, zatim woff kao rezervu.

styles.css

@font-face {
  font-family: 'MojFont';           /* 1. Ime za CSS */
  src: url('mojfont.woff2') format('woff2'),  /* 2. Brzi WOFF2 */
       url('mojfont.woff') format('woff');   /* 3. Rezervni WOFF */
  font-weight: normal;
  font-style: normal;
  font-display: swap;               /* 4. Strategija prikaza */
}

07 — Profesionalni trik

font-display vrijednosti

Određuje kako se tekst ponaša dok se font još učitava. Važno za brzinu i korisničko iskustvo.

Vrijednost	Što se događa?	Kada koristiti?
swap	Tekst se odmah prikazuje rezervnim fontom, zatim se zamijeni.	Većina slučajeva — tekst je uvijek vidljiv.
block	Tekst je nevidljiv do 3 sekunde dok se font ne učita.	Samo za icon fontove.
fallback	Kratko blokiranje (~100ms), zatim rezervni font.	Balans između izgleda i brzine.
optional	Font se koristi samo ako se učita iznimno brzo.	Kada su performanse apsolutni prioritet.

Za kraj

Savjet za početnike

Kada programiraš web stranicu, uvijek prvo provjeri Google Fonts. Svi fontovi tamo su 100% legalni za web, besplatni za korištenje, a Google automatski daje najbrži WOFF2 format i gotov CSS kod.

fonts.google.com