Kako samostalno ugraditi vlastitu tipografiju na web stranicu – praktični vodič

Tipografija je srž svakog web dizajna. Od prvog dojma do čitljivosti sadržaja, ona oblikuje identitet brenda i utječe na korisničko iskustvo. S razvojem tehnologije i dostupnosti fontova, prilagodba tipografije postala je standard, a mnogi se pitaju kako točno uvesti vlastiti font na svoju stranicu. U nastavku donosimo detaljan, korak‑po‑korak vodič koji pokriva sve od odabira do implementacije, uz praktične primjere i korisne savjete.

1. Odabir tipografije – od ideje do konačnog izbora

Prije nego što započnete s tehničkim detaljima, važno je odrediti koji tipografijski stil najbolje odgovara vašem projektu. Tipografija se dijeli na tri osnovne kategorije:

• Serifni fontovi – slova s malim linijama na krajevima, tradicionalni i formalni, primjer: Garamond, Baskerville.
• Sans‑serifni fontovi – čisti i moderni, bez linija, primjer: Helvetica, Roboto, Open Sans.
• Monospace fontovi – jednaka širina slova, idealan za kod i tehničke dijelove, primjer: Consolas, Courier New.

Osim stila, obratite pažnju na licencu tipografije. Mnogi fontovi su slobodni za osobnu upotrebu, ali zahtijevaju komercijalnu licencu za poslovne projekte. Prije preuzimanja provjerite uvjete korištenja i osigurajte da imate pravo na upotrebu u vašem web projektu.

2. Preuzimanje i priprema fonta

Jedan od najčešćih izvora tipografije je Google Fonts, ali postoje i druge platforme poput Adobe Fonts, Font Squirrel ili DaFont. Nakon odabira, preuzmite datoteke u formatu .woff ili .woff2 – ovi formati su optimizirani za web i podržani su u svim modernim preglednicima.

Pripremni koraci:

1. Preuzmite ZIP arhivu s tipografijom.
2. Otvorite arhivu i izvadite datoteke .woff i .woff2.
3. Stvorite mapu fonts u korijenu vaše web stranice.
4. Premjestite preuzete datoteke u tu mapu.

3. Ugradnja fonta u CSS

Da biste koristili vlastiti font, potrebno je definirati @font-face u vašem CSS‑u. Evo primjera kako to učiniti:

@font-face{ font-display:swap;
    font-family: 'MojaTipografija';
    src: url('fonts/mojafont.woff2') format('woff2'),
         url('fonts/mojafont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
 }

body {
    font-family: 'MojaTipografija', sans-serif;
}

Ovaj kod registrira font pod imenom MojaTipografija i primjenjuje ga na cijelu stranicu. Ako želite koristiti različite težine ili stilove, definirajte dodatne @font-face pravila s odgovarajućim font-weight i font-style vrijednostima.

4. Optimizacija i performanse

Ugradnja vlastitog fonta može utjecati na brzinu učitavanja stranice. Da biste smanjili utjecaj, slijedite ove savjete:

• Koristite samo potrebne znakove – većina fontova