Licenciranje web fontova

Vodič za učenike

Smijemo li koristiti bilo koji font na webu?

Zlatno pravilo: Autorska prava

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 "pozvati" 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!

• swap Što se događa dok se font učitava? Tekst se odmah prikazuje običnim fontom. Kad se tvoj učita, zamijene se. Kada koristiti? Većina slučajeva - tekst je uvijek odmah vidljiv!
• block Tekst je nevidljiv (do 3 sekunde) dok se font ne učita. Kada koristiti? 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. Kada koristiti? Idealan balans između izgleda dizajna i brzine učitavanja.
• optional Tvoj font će se koristiti samo ako se uspije učitati. Kada koristiti? 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