Fontovi izgledaju nevino dok ti ne unište LCP score i ne donesu GDPR globu. Google Fonts CDN je default-iran u 50% WP tema — i većina developera ni ne zna da je to legalno upitno u EU od 2022. Ovo je vodič kako pravilno servirat fontove u 2026.

Tri opcije za web fontove

Self-hosted fontovi — fajlovi na tvojem serveru. Najveća kontrola, najbolja GDPR pozicija.
Google Fonts (fonts.googleapis.com) — Google servira. Klasičan default, ali GDPR rizik.
Bunny Fonts ili Fontshare — privacy-friendly alternative.

Performance impact

Fontovi blokiraju text rendering. Loš font setup = razlika između 1.5s i 4s LCP.

Browser čeka font fajl prije nego pokaže tekst (FOIT = Flash of Invisible Text), osim ako koristiš font-display: swap.
2-4 font weight-a po familyji = 200-800KB dodatnih bytes.
External font CDN dodaje DNS lookup + TLS handshake (200-500ms).

Google Fonts i GDPR — što se dogodilo

2022. njemački sud (LG München) presudio: embed-ing Google Fonts kroz Google CDN bez user consenta = kršenje GDPR-a, jer Google prima IP adresu posjetitelja bez pravne osnove. Globa: 100 EUR.

Otad: tisuće Cease & Desist pisama od njemačkih privatnih osoba/lažnih advokata sajtovima koji još koriste Google Fonts kroz CDN. Većina blefa, ali risk je realan i CNIL (FR) i druge DPA-e su podržale njemačku poziciju.

Rješenje: self-host ili koristi privacy-friendly CDN.

Self-hosting Google Fonts — kako

Metoda 1: google-webfonts-helper

Idi na gwfh.mranftl.com (google-webfonts-helper).
Search za font (npr. "Inter").
Odaberi weights (400, 600, 700 najčešće dovoljno).
Odaberi charset (latin + latin-ext za HR).
Download zip.
Upload u wp-content/themes/your-theme/fonts/.
Copy CSS @font-face block, paste u style.css.

Metoda 2: WordPress plugin

OMGF | Host Webfonts Local — najpopularniji, automatski.
Disable and Remove Google Fonts — nuklearna opcija, ukloni sve Google Font calls.

Plugin downloada, hosta lokalno, replace-a all Google URL-ove. Setup u 5 minuta.

Metoda 3: Bunny Fonts

Bunny Fonts je 1:1 drop-in replacement za Google Fonts, isti API, GDPR-friendly (EU servirano, bez tracking-a). Promijeniš fonts.googleapis.com → fonts.bunny.net i gotovo.

<link href="https://fonts.bunny.net/css?family=Inter:400,600,700" rel="stylesheet">

font-display: swap

Bez ovoga, browser krije tekst dok ne učita font. S njim, browser odmah pokaže tekst u fallback fontu, zamijeni kad stigne web font (FOUT = Flash of Unstyled Text).

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;  /* <-- ovo */
}

Vrijednosti:

auto (default) — browser odlučuje, obično FOIT.
block — invisible do 3s, pa fallback.
swap — fallback odmah, swap kad stigne. Preporuka za content.
fallback — kompromis: invisible 100ms, fallback do 3s, swap.
optional — fallback, swap samo ako stigne brzo. Najmanji layout shift.

Preload kritičnih fontova

Ako sigurno trebaš određeni font (logo, headline), preload ga u <head>:

<link rel="preload" href="/fonts/inter-700.woff2" as="font" type="font/woff2" crossorigin>

Browser ga skida paralelno s ostalim resourcima. Brže rendering.

WOFF2 format

U 2026 koristi SAMO WOFF2 — najbolja kompresija, 100% browser support. Stari formati (WOFF, TTF, EOT) više nisu potrebni.

Subsetting — manje znakova, manji fajl

Full Inter font ima ~600 znakova (latin, latin-ext, vietnamese, cyrillic) = 50KB. Tvoj sajt koristi samo latin + latin-ext = subset to → 15KB.

Alati: fonttools Python paket, ili google-webfonts-helper koji to radi automatski po charset.

Za HR sajt: latin + latin-ext je dovoljno (latin-ext sadrži č, ć, š, đ, ž).

Variable fontovi

Variable font = jedan fajl, mnogo weight-ova/stilova. Inter Variable = 200KB s svim weight-ovima (100-900) + italics, umjesto 8 različitih fajlova × 50KB = 400KB.

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;  /* range */
}

U CSS-u koristiš bilo koji weight: font-weight: 437;. Variable Latih, Inter, Recursive, Fraunces — sve dostupno.

System fontovi — najbrži

Ako ti dizajn dozvoljava, koristi system font stack — 0 bytes, instant render, native look:

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

Na macOS pokazuje San Francisco, Windows Segoe UI, Android Roboto. Vrlo brz, dobro izgleda.

Custom fontovi vs Adobe Fonts

Adobe Fonts (bivši Typekit) — kvalitetni profesionalni fontovi, uključeni u Creative Cloud subscription. Loading kroz use.typekit.net.

GDPR: sličan problem kao Google Fonts (Adobe je US tvrtka). Probleme bilo manje jer Adobe ima EU DPA i opcionalan EU CDN regiju.

Icon fontovi vs SVG icons

Font Awesome + sličniji = legacy approach. Velike, ne tree-shakable, blocking.

Bolji pristup: SVG ikone inline ili kao sprite (npr. Lucide, Heroicons, Tabler Icons). Tree-shakable, manji bundle, accessibility-friendly.

Performance audit — što testirat

PageSpeed Insights → "Ensure text remains visible during webfont load" → znači nemaš font-display swap.
Network tab → koliko font fajlova, ukupna veličina.
Lighthouse Diagnostics → "Reduce unused CSS" često uključuje font weight-ove koje ne koristiš.
Web Vitals → CLS (Cumulative Layout Shift) — fontovi koji se učitavaju kasno pomicaju layout.

Anti-CLS trikovi

Fontovi različitih veličina pomiču layout kad swap-aju. Rješenja:

size-adjust u @font-face — match metrics fallback fonta.
ascent-override, descent-override, line-gap-override — fine tuning.
Alat: Fallback Font Generator — generira optimalne overrides za bilo koji par fontova.

WMD setup za fontove

Maintenance Plan klijenti dobivaju automatski font audit — sve Google Fonts CDN reference se konvertiraju u self-hosted lokalno (OMGF plugin za WP, manual za Craft). WOFF2 format only, font-display: swap, subset za latin + latin-ext (HR specific). Variable fontovi preporučeni za nove dizajne. GDPR compliance audit uključen u onboarding — bez Google Fonts CDN-a, bez tracking-a, bez consent required.

FAQ

Smije li Google Fonts u Hrvatskoj? Pravna siva zona — AZOP nije presudila kao njemačka, ali primjenjuje se GDPR. Sigurnije self-host.

Bunny Fonts je sigurno za GDPR? Da. EU-based (Slovenija), ne loguje IP adrese, eksplicit privacy policy.

Kako provjerit da li sajt koristi Google Fonts CDN? Otvori DevTools Network tab, filter po "font". Ako vidiš fonts.googleapis.com ili fonts.gstatic.com → koristi Google CDN.

Variable font za stari browser? Edge 79+, Chrome 62+, Firefox 62+, Safari 11+ podržavaju. Stariji browseri ignoriraju i koriste fallback. 99%+ users OK.

Adobe Fonts ili Google Fonts? Adobe ima bolji izbor profesionalnih fontova, ali plaćaš subscription. Google je free + open-source. Za većinu sajtova Google subset → self-host je optimalno.

Trebaš font cleanup ili GDPR compliance audit? WMD konvertira Google Fonts CDN u self-hosted lokalno + font-display optimizacija. Javi se preko kontakt forme.

Web fontovi 2026 — self-host vs Google Fonts, font-display, subsetting, variable fonts (performance + GDPR)