Licenciranje
web fontova

Smijemo li koristiti bilo koji font na webu? Sve sto trebas znati o licencama, formatima i pravilnom koristenju fontova.

Pocni uciti Pojmovnik
01 — Osnove

Zlatno pravilo: Autorska prava

Zamisli da radis savrsenu web stranicu. Pronasao si predivan font, preuzeo ga i stavio na sajt. Sve izgleda dobro — ali pricekaj!

!
Provjeri licencu!

Bas kao glazba, filmovi ili videoigre, fontovi imaju svoje autore i zasticeni su autorskim pravima. Ne smijes samo preuzeti bilo koji font i staviti ga na svoju web stranicu.

Svaki font ima svoju licencu (dozvolu) koja tocno kaze sto s njim smijes, a sto ne smijes raditi. Krsenje licence moze imati pravne posljedice cak i ako si to napravio slucajno.

02 — Vrste licenci

Besplatne licence (Open Source)

Postoji mnostvo izvrsnih fontova koji su potpuno besplatni za web koristenje zahvaljujuci open source licencama.

SIL Open Font — OFL

Najcesca licenca. Dozvoljava ti da font besplatno koristis na webu, mijenjanje i dijeljenje dalje. Vecina Google Fonts fontova koristi upravo ovu licencu.

Apache License 2.0

Dopusta koristenje fonta u komercijalne svrhe — npr. ako radis web stranicu za klijenta i to naplacujes.

GNU GPL

Besplatna je, ali ima uvjet: ako mijenjate font, vasa izmjena mora ostati slobodna za sve pod istom licencom. To se zove copyleft.

03 — Placeni fontovi

Komercijalni fontovi (Oni koji se placaju)

Nekad klijent zeli jedinstven font koji se mora kupiti. Jedna kupljena licenca ne vrijedi za sve slucajeve koristenja.

Desktop licenca

Dozvola za instalaciju fonta na racunalo. Koristi se iskljucivo za Word, Photoshop, izradu plakata ili vizitki.

NE SMIJES koristiti za web!

Web licenca (Webfont)

Potrebna je za koristenje fonta na web stranicama pomocu CSS pravila @font-face. Cijena ovisi o broju pregleda, domenama i trajanju licence.

Ovo trebas za web
i
Web Safe fontovi — iznimka

Ako u CSS-u napises font-family: Arial;, to je u redu. Ne uploadas font na server — samo govoris pregledniku posjetitelja neka ga upotrijebi ako ga ima. Takvi fontovi nazivaju se Web Safe fontovi.

04 — Tehnicki detalji

Formati fontova: Brzina je bitna

Razliciti formati datoteka fontova razlikuju se po velicini i podrski u preglednicima. Pravi odabir direktno utjece na brzinu ucitavanja stranice.

WOFF2
Web Open Font Format 2 — Preporuceni format Ima najbolju kompresiju, datoteke su male i stranica se ucitava brzo. Podrzavaju ga svi moderni preglednici. Uvijek koristite ovo kao primarni format.
WOFF
Web Open Font Format — Rezervni format Dobra kompresija i siroka podrska. U CSS-u ga stavljamo kao rezervu — ako posjetitelj ima stariji preglednik, ucitat ce se WOFF.
TTF / OTF
TrueType / OpenType — Klasicni formati Klasicni formati namijenjeni racunalu. Na webu ih koristimo samo kao zadnju opciju za jako stare preglednike jer su datoteke vece i usporavaju stranicu.
EOT
Embedded OpenType — Zastarjelo Format koji je postojao iskljucivo za Internet Explorer. Danas ga nitko ne koristi.
05 — Implementacija

Ubacivanje fonta: @font-face

Kad imas legalan font u pravom formatu, registriras ga u CSS-u pomocu @font-face pravila. Pametno je prvo ponuditi WOFF2, a zatim WOFF kao rezervu.

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

Svojstvo font-display

Odreduje kako se tekst ponasa dok se font jos ucitava.

Vrijednost Sto se dogada? Kada koristiti?
swap preporuceno Tekst se odmah prikazuje sistemskim fontom. Kad se custom font ucita, zamijene se. Vecina slucajeva — tekst je uvijek odmah vidljiv.
block Tekst je nevidljiv do 3 sekunde dok se font ne ucita. Samo za icon fontove — bolje prazno nego krivo slovo umjesto ikone.
fallback Kratko blokiranje oko 100 ms, zatim se koristi sistemski font do ucitavanja. Balans izmedu tocnog dizajna i brzine ucitavanja.
optional Custom font se koristi samo ako se uspije ucitati iznimno brzo. Kada su performanse apsolutni prioritet.

Google Fonts — najbrzi put

Google Fonts automatski daje WOFF2 format i gotov CSS kod, besplatno i legalno.

HTML 
<!-- U <head> dijelu HTML dokumenta: -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
      rel="stylesheet">

/* U CSS-u: */
body {
  font-family: 'Roboto', sans-serif;
}
06 — Rjecnik pojmova

Pojmovnik: Hrvatski nazivi

Kratki pregled tehnickih pojmova koji se koriste u ovom vodicu, objasnjeni jednostavnim jezikom.

licenca Dozvola autora koja definira smijemo li font koristiti, mijenjati ili prodavati, i pod kojim uvjetima. Svaki font ima licencu — procitaj je prije koristenja.
autorsko pravo Pravna zastita koja autoru fonta daje iskljucivo pravo odlucivanja o tome tko, kako i gdje smije koristiti njegovo djelo.
open source Slobodan softver cijij je izvorni kod javan i besplatan za koristenje. Open source fontovi mogu se besplatno koristiti na webu, ali svaka licenca ima svoje uvjete.
copyleft Uvjet GNU GPL licence: ako mijenjate font, vasa izmjena mora ostati slobodna za sve pod istim uvjetima. Izmijenjeni rad ne smijete zatvoriti u komercijalnu licencu.
desktop licenca Dozvola za instalaciju fonta na racunalo. Vrijedi za programe poput Worda ili Photoshopa, ali NE i za web stranice.
web licenca Posebna vrsta licence za koristenje fonta na web stranicama putem CSS pravila @font-face. Cijena ovisi o broju pregleda stranice i broju domena.
web safe fontovi Fontovi ugradeni u operacijski sustav vecine korisnika (Arial, Georgia, Times New Roman...). Mogu se koristiti u CSS-u bez uploada — preglednik posjetitelja ih vec ima.
@font-face CSS pravilo kojim web pregledniku govoris gdje se nalazi datoteka fonta i pod kojim imenom ces ga pozivati u ostatku CSS koda.
font-display CSS svojstvo unutar @font-face koje odreduje kako se tekst prikazuje dok se font jos ucitava s posluzitelja. Preporucena vrijednost je swap.
kompresija Postupak smanjivanja velicine datoteke. WOFF2 ima bolju kompresiju od WOFF — isto pismo, manja datoteka, brze ucitavanje stranice.
WOFF2 Web Open Font Format 2. Preporuceni format za web fontove. Ima najmanju velicinu datoteke i podrzavaju ga svi moderni preglednici.
Google Fonts Besplatna Google-ova biblioteka web fontova. Svi fontovi su legalni i bez naknade, a Google automatski isporucuje WOFF2 format i gotov kod za ugradnju.

Pocetni savjet: kada zapocines novi projekt, odmah idi na fonts.google.com — besplatno, legalno i brzo u jednom koraku.

Kratki pregled za ponavljanje

Provjeri licencu Svaki font ima licencu. Procitaj je prije koristenja.
Web vs Desktop Desktop licenca ne vrijedi za web. Treba ti posebna web licenca.
Koristi WOFF2 Najmanji format, brze ucitavanje, radi u svim modernim preglednicima.
font-display: swap Tekst ostaje vidljiv cak i dok se font jos ucitava.
Google Fonts Besplatno, legalno, brzo. Idealan polazak za svaki projekt.
Web Safe fontovi Pozivanje fonta u CSS-u bez uploada uvijek je legalno.