Pisave so videti nedolžne, dokler ne uničijo vaše ocene LCP in vam prinesejo kazen po GDPR. Google Fonts CDN je privzeto nastavljen v 50 % tem WP – in večina razvijalcev sploh ne ve, da je v EU od leta 2022 pravno vprašljiv. To je vodnik o tem, kako pravilno streči pisave v letu 2026.
Tri možnosti za spletne pisave
- Samostojno gostovane pisave – datoteke na vašem strežniku. Največji nadzor, najboljši položaj glede GDPR.
- Google Fonts (fonts.googleapis.com) – Storitev Google. Klasična privzeta nastavitev, vendar tveganje GDPR.
- Bunny Fonts ali Fontshare – alternative, ki zagotavljajo zasebnost.
Vpliv na uspešnost
Pisave blokirajo upodabljanje besedila. Slaba nastavitev pisave = razlika med 1,5si 4s LCP.
- Brskalnik čaka na datoteko s pisavo, preden prikaže besedilo (FOIT = Flash of Invisible Text), razen če uporabite
font-display: swap. - 2–4 debeline pisav na družino = 200–800 KB dodatnih bajtov.
- Zunanja CDN pisav doda iskanje DNS + TLS rokovanje (200–500 ms).
Google Fonts in GDPR – kaj se je zgodilo?
2022. Nemško sodišče (LG München) je razsodilo: vdelava Google Fonts prek Google CDN brez soglasja uporabnika = kršitev GDPR, ker Google prejme IP-naslov obiskovalca brez pravne podlage. Globa: 100 EUR.
Od takrat: na tisoče pisem o prenehanju in opustitvi dejanj, ki so jih nemški zasebniki/lažni odvetniki poslali spletnim mestom, ki še vedno uporabljajo Google Fonts prek CDN. Večina blefira, vendar je tveganje resnično in CNIL (FR) ter drugi organi za varstvo podatkov so podprli nemško stališče.
Rešitev: samostojno gostovanje ali uporaba CDN-ja, ki zagotavlja zasebnost.
Samostojno gostovanje Google Fonts – kako
1. metoda: pomočnik za spletne pisave google
- Pojdite na gwfh.mranftl.com (pomoč pri pisanju pisav Google).
- Poiščite pisavo (npr. »Inter«).
- Izberite uteži (običajno zadostuje 400, 600, 700).
- Izberite nabor znakov (latin + latin-ext za HR).
- Prenesi zip datoteko.
- Naloži v
wp-content/themes/your-theme/fonts/. - Kopiraj blok CSS @font-face in prilepi v
style.css.
2. način: Vtičnik za WordPress
- OMGF || Host Webfonts Local — najbolj priljubljen, samodejni.
- Onemogoči in odstrani pisave Google – jedrna možnost, odstrani vse klice pisav Google.
Vtičniki se prenašajo, gostovajo lokalno, nadomeščajo vse Googlove URL-je. Nastavitev traja 5 minut.
3. metoda: Zajčje pisave
Bunny Fonts je 1:1 zamenjava za Google Fonts, isti API, prijazen do GDPR (zagotavlja delovanje v EU, brez sledenja). Spremenite fonts.googleapis.com na fonts.bunny.net in končali ste.
prikaz-pisav: zamenjava
Brez tega brskalnik skrije besedilo, dokler se pisava ne naloži. Z njim brskalnik takoj prikaže besedilo v rezervni pisavi in jo nadomesti, ko prispe spletna pisava (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 */ }Vrednosti:
-
auto(privzeto) – brskalnik se odloči, običajno FOIT. -
block— neviden 3 sekunde, nato rezervni način. -
swap— takojšnja rezerva, zamenjava, ko prispe. Priporočilo za vsebino. -
fallback— kompromis: nevidnih 100 ms, rezerva do 3 s, zamenjava. -
optional– rezerva, zamenjava le, če prispe hitro. Najmanjši premik postavitve.
Predhodno nalaganje kritičnih pisav
Če nujno potrebujete določeno pisavo (logotip, naslov), jo predhodno naložite v :
Brskalnik ga prenese vzporedno z drugimi viri. Hitrejše upodabljanje.
Format WOFF2
Leta 2026 uporablja SAMO WOFF2 – najboljšo kompresijo, 100-odstotno podporo brskalnika. Stari formati (WOFF, TTF, EOT) niso več potrebni.
Podmnožina – manj znakov, manjša datoteka
Celotna pisava Inter ima ~600 znakov (latinica, latin-ext, vietnamščina, cirilica) = 50 KB. Vaše spletno mesto uporablja samo latinico + latin-ext = podmnožica do → 15 KB.
Orodja: paket fonttools za Python ali google-webfonts-helper, ki to naredi samodejno za vsak nabor znakov.
Za spletno mesto za človeške vire: latin + latin-ext je dovolj (latin-ext vsebuje č, ć, š, đ, ž).
Spremenljive pisave
Spremenljiva pisava = ena datoteka, veliko debelin/stilov. Medspremenljiva = 200 KB z vsemi debelinami (100–900) + poševni tisk, namesto 8 različnih datotek × 50 KB = 400 KB.
@font-face { font-family: 'Inter'; src: url('/fonts/inter-variable.woff2') format('woff2-variations'); font-weight: 100 900; /* range */ } V CSS-ju lahko uporabite poljubno težo: font-weight: 437; . Spremenljivke Latih, Inter, Recursive, Fraunces – vse so na voljo.
Sistemske pisave – najhitrejše
Če vaša zasnova dopušča, uporabite sistemski sklad pisav – 0 bajtov, takojšnje upodabljanje, izvorni videz:
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;V sistemu macOS prikazuje San Francisco, v sistemu Windows Segoe UI in Android Roboto. Zelo hitro, izgleda dobro.
Pisave po meri v primerjavi z Adobejevimi pisavami
Adobe Fonts (prej Typekit) – kakovostne profesionalne pisave, vključene v naročnino na Creative Cloud. Nalaganje prek use.typekit.net .
GDPR: podobna težava kot pri Google Fonts (Adobe je ameriško podjetje). Manj težav, ker ima Adobe EU DPA in neobvezno regijo EU CDN.
Pisave ikon v primerjavi z ikonami SVG
Font Awesome + bolj podobno = starejši pristop. Velik, ne pretresljiv z drevesi, blokirajoč.
Boljša dostopnost: SVG ikone v vrstici ali kot sprite (npr. Lucide, Heroicons, Tabler Icons). Drevo tresljivo, manjši sveženj, prijazno za dostopnost.
Revizija uspešnosti – kaj preveriti
- PageSpeed Insights → »Zagotovite, da besedilo ostane vidno med nalaganjem spletne pisave« → pomeni, da nimate zamenjave prikaza pisave.
- Zavihek Omrežje → število datotek pisav, skupna velikost.
- Diagnostika Lighthouse → »Zmanjšajte neuporabljen CSS« pogosto vključuje debeline pisav, ki jih ne uporabljate.
- Spletni podatki → CLS (Cumulative Layout Shift) – pisave, ki se naložijo pozno in premaknejo postavitev.
Triki proti CLS
Pisave različnih velikosti pri zamenjavi premaknejo postavitev. Rešitve:
-
size-adjustv @font-face — ujema se z nadomestno pisavo za meritve. -
ascent-override,descent-override,line-gap-override— fina nastavitev. - Orodje: Generator rezervnih pisav – ustvari optimalne preglasitve za kateri koli par pisav.
Nastavitev pisave WMD
Stranke z vzdrževalnim načrtom prejmejo samodejni pregled pisav – vse reference CDN-ja Google Fonts se pretvorijo v lokalno gostovane vire (vtičnik OMGF za WP, priročnik za Craft). Samo format WOFF2, font-display: swap, podmnožica za latin + latin-ext (specifično za HR). Za nove dizajne so priporočene spremenljive pisave. Pregled skladnosti z GDPR je vključen v uvajanje – ni CDN-ja Google Fonts, ni sledenja, ni potrebno soglasje.
Pogosta vprašanja
Ali so Google Fonts dovoljene na Hrvaškem? Pravno sivo območje – AZOP ni odločal tako kot Nemčija, vendar velja GDPR. Varnejše samostojno gostovanje.
Je Bunny Fonts varen v skladu z GDPR? Da. Sedež v EU (Slovenija), ne beleži IP-naslovov, ima izrecno politiko zasebnosti.
Kako preverim, ali spletno mesto uporablja Google Fonts CDN? Odprite zavihek DevTools Network in filtrirajte po »font«. Če vidite fonts.googleapis.com ali fonts.gstatic.com → uporablja Google CDN.
Spremenljiva pisava za star brskalnik? Podpora za Edge 79+, Chrome 62+, Firefox 62+, Safari 11+. Starejši brskalniki jo ignorirajo in uporabljajo rezervno pisavo. 99 %+ uporabnikov je v redu.
Adobe Fonts ali Google Fonts? Adobe ima boljšo izbiro profesionalnih pisav, vendar se za naročnino plača. Google je brezplačen + odprtokoden. Za večino spletnih mest je optimalna Google podmnožica → samostojno gostovanje.
Potrebujete čiščenje pisav ali revizijo skladnosti z GDPR? WMD pretvori Google Fonts CDN v samostojno lokalno gostovanje + optimizacijo prikaza pisav. Stopite v stik z nami prek kontaktnega obrazca .
