Vodič za učenike: Smijemo li koristiti bilo koji font na webu?
Zamisli da radiš savršenu web stranicu. Pronašao si predivan font, preuzeo ga i stavio na sajt. Sve izgleda super, zar ne? [cite: 4, 5]
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. [cite: 8, 9, 10]
Svaki font ima svoju licencu (dozvolu) koja točno kaže što s njim smiješ, a što ne smiješ raditi. [cite: 11]
Ako nemate budžet za kupovinu fontova, ove open-source licence su vaše rješenje: [cite: 13]
Vaš najbolji prijatelj! Najčešća licenca. Dozvoljava vam da font besplatno koristite na webu, mijenjate ga i dijelite dalje. [cite: 14, 15]
Super licenca! Dopušta vam da font koristite čak i u komercijalne svrhe (npr. ako radite web za klijenta i to naplatite). [cite: 16, 17, 18]
Besplatna je, ali ima "kvaku": ako mijenjate font, vaš novi dizajn također mora biti besplatan za sve pod istom licencom. [cite: 19, 20]
Nekada klijent želi jedinstven font koji se mora kupiti. Tu morate biti jako oprezni, jer jedna kupljena licenca ne vrijedi za sve! [cite: 21, 22]
Dozvola za instalaciju fonta na tvoje računalo. Koristi se isključivo za Word, Photoshop, izradu plakata ili vizitki. [cite: 23, 24]
ZAPAMTI: Ovu licencu NE SMIJEŠ koristiti za web stranice! [cite: 25]
Ovo je ono što vam treba za web! Služi isključivo za korištenje fonta na stranicama pomoću CSS pravila @font-face. [cite: 26, 27]
Cijena web licence često ovisi o: broju pregleda stranice, broju domena i trajanju. [cite: 28]
NE smiješ ih kopirati! [cite: 46]
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. [cite: 47, 48]
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. [cite: 50, 51]
Odabirom pravog formata direktno utječete na performanse i brzinu učitavanja stranice: [cite: 52, 93]
Kada napokon imaš legalan font u pravom formatu, moraš ga "upoznati" sa svojim CSS-om: [cite: 64, 65]
@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 učitavanja */
}Pametan trik: Uvijek je najbolje prvo ponuditi woff2, a tek onda woff kao rezervu! [cite: 80, 81]
Svojstvo font-display određuje kako se tekst ponaša dok se tvoj font još učitava. Presudno za dobru brzinu weba! [cite: 92, 93]
| 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. [cite: 94] | Većina slučajeva – tekst je uvijek odmah vidljiv! [cite: 94] |
| block | Tekst je nevidljiv (do 3 sekunde) dok se font ne učita. [cite: 94] | Samo za ikone fontove (bolje prazno nego čudno slovo umjesto ikone). [cite: 94] |
| fallback | Kratko blokiranje (~100ms), zatim se koristi obični font do učitavanja novog. [cite: 94] | Idealan balans između izgleda dizajna i brzine učitavanja. [cite: 94] |
| optional | Tvoj font će se koristiti samo ako se uspije učitati iznimno brzo. [cite: 94] | Kada su performanse apsolutni prioritet weba. [cite: 94] |
"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!" [cite: 97, 98]