Kako lokalno hostati fontove umjesto korištenja Google Fonts

Zašto samostalno hostati Google Fonts?

Google Fonts učinio je dobru tipografiju jednostavnom. Dodate stylesheet, odaberete nekoliko težina i objavite stranicu. Godinama je to bio razuman zadani izbor za manje timove.

Kompromis je u tome što preglednik svakog posjetitelja kontaktira uslugu treće strane kako bi dohvatio CSS za fontove i datoteke fontova. To ima dvije posljedice.

Prvo, dodaje vanjsku ovisnost u prikazivanje. Ako je CSS za font spor, blokiran ili nedostupan u korisnikovoj regiji ili mreži, vaša stranica čeka ili se vraća na zamjenski font.

Drugo, otvara pitanje privatnosti. Zahtjev za font može trećoj strani otkriti korisnikovu IP adresu, user agent, kontekst referrer policyja i vremenske informacije. Google Fonts navodi da ne postavlja cookies putem Fonts API-ja, ali “bez cookies” nije isto što i “bez osobnih podataka.” Prema GDPR-u, IP adresa i dalje može biti osobni podatak u određenom kontekstu.

Samostalno hostanje fontova nije automatski potrebno za svaku web-stranicu, a ovo nije pravni savjet. No za europske stranice, stranice javnog sektora, zdravstvo, obrazovanje, financije ili bilo koji tim koji pokušava smanjiti nepotrebne zahtjeve prema trećim stranama, lokalno hostanje obično je čišći izbor.

Često je i dobitak u performansama kada se izvede dobro. Ključ je u “izvede dobro.” Kopiranje šest datoteka fontova u /assets/fonts/ i njihovo učitavanje na svakoj stranici može biti gore od korištenja hostane usluge. Ako želite širi kontekst performansi, naš raniji tekst o tome zašto su web-fontovi i dalje najlakši dobitak u performansama na većini stranica pokriva uobičajene obrasce rasipanja.

Što se mijenja kada hostate sami

Kada koristite Google Fonts na uobičajen način, vaša stranica radi ovo:

<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=Inter:wght@400;600&display=swap" rel="stylesheet">

Preglednik prvo traži CSS s fonts.googleapis.com, a zatim preuzima datoteke fontova s fonts.gstatic.com.

Kada hostate sami, vaša stranica trebala bi tražiti i CSS i datoteke fontova s vaše vlastite domene:

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

Time uklanjate zahtjev za font prema trećoj strani. Ujedno preuzimate odgovornost za odabir formata datoteka, cache zaglavlja, zamjenske fontove i ažuriranja.

Tu odgovornost vrijedi shvatiti ozbiljno. Fontovi se nalaze na kritičnom putu prikazivanja. Loše postavljanje fontova može uzrokovati nevidljiv tekst, pomake izgleda i spor prvi prikaz.

Korak 1: Provjerite što zaista koristite

Prije nego što bilo što preuzmete, popišite obitelji fontova, težine, stilove i skupove znakova koje vaša stranica doista treba.

Tipična marketinška stranica mogla bi trebati:

• Regular 400 za osnovni tekst
• Semibold 600 ili bold 700 za naslove i gumbe
• Italic 400 samo ako dizajn zaista koristi kurziv
• Samo latinični skup znakova, osim ako stranica podržava više jezika

Budite sumnjičavi prema starim zadanim postavkama dizajn-sustava. Mnoge stranice učitavaju 300, 400, 500, 600, 700, kurzive i više pisama jer ih je netko jednom odabrao u biraču fontova.

U pregledničkom DevTools otvorite panel Network, filtrirajte po “font,” ponovno učitajte stranicu i provjerite koje se datoteke traže. Zatim pregledajte CSS za korištenje font-weight. Ako vaš CSS nikada ne koristi 300, nemojte hostati 300.

Ako kasnije procjenjujete učinak, Lighthouse može pomoći, ali nemojte njegov rezultat tretirati kao cijelu priču. Koristite ga kao dijagnostički alat, a ne kao suca. Imamo zaseban vodič o čitanju Lighthouse izvješća bez panike, koji je koristan pri prioritiziranju popravaka fontova.

Korak 2: Preuzmite prave datoteke fontova

Google Fonts nudi open-source fontove. Možete ih preuzeti s web-stranice Google Fonts ili iz odgovarajućeg repozitorija projekta fonta. Provjerite licencu, ali većina Google Fonts fontova distribuira se pod otvorenim licencama kao što su SIL Open Font License ili Apache License.

Za web preferirajte WOFF2. Široko ga podržavaju moderni preglednici i obično je mnogo manji od TTF ili OTF. U 2026. izravno posluživanje TTF-a preglednicima rijetko je opravdano za javne web-stranice.

Razumna struktura direktorija izgleda ovako:

/public
  /fonts
    inter-latin-400.woff2
    inter-latin-600.woff2
    inter-latin-700.woff2

Koristite opisne nazive datoteka. Šest mjeseci kasnije, font.woff2 bit će iritantan. inter-latin-600.woff2 je dosadan i koristan.

Ako vaša stranica koristi build sustav, držite izvorne fontove na jasnom mjestu i neka build pipeline kopira optimizirane datoteke u javni direktorij asseta.

Korak 3: Sužavajte fontove kada je prikladno

Sužavanje znači uklanjanje znakova koji vam ne trebaju. Puni font može uključivati latinicu, ćirilicu, grčki, vijetnamski, simbole i mnoge OpenType značajke. Ako vaša landing stranica samo na engleskom treba samo latinične znakove, subset može biti dramatično manji.

Postoje dva uobičajena pristupa:

1. Koristite unaprijed pripremljen subset od pružatelja fonta ili iz repozitorija.
2. Generirajte vlastiti subset alatom za fontove kao što je pyftsubset iz fonttools.

Za mnoge timove unaprijed pripremljeni latinični subseti su dovoljni. Prilagođeno sužavanje korisno je kada imate vrlo ograničene stranice, poput jedne kampanjske stranice s ograničenim tekstom, ili sučelje proizvoda s predvidljivim pokrivanjem znakova.

Budite oprezni s višejezičnim stranicama. Nedostajući glifovi uzrokuju miješanje zamjenskih fontova, što može izgledati pokvareno i narušiti čitljivost. Ako podržavate više jezika, mapirajte subsete fontova na jezične rute umjesto da posvuda forsirate jedan maleni subset.

Korak 4: Napišite svoja @font-face pravila

Minimalna lokalna postavka izgleda ovako:

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

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

Ovdje je važno nekoliko detalja.

Koristite font-display: swap za većinu sadržajnih stranica. Time pregledniku kažete da brzo prikaže tekst zamjenskim fontom, a zatim zamijeni web-font kada stigne. To izbjegava najgoru verziju FOIT-a: bljesak nevidljivog teksta.

Postavite eksplicitan skup zamjenskih fontova. Ako prilagođeni font ne uspije, korisnici i dalje trebaju dobiti čitljiv tekst. Zamjenski fontovi nisu naknadna misao; oni su dio dizajna. Ako trebate ponovno razmotriti veličine, duljinu retka i odabire osnovnog teksta, počnite s praktičnim vodičem za čitljivu tipografiju na modernom webu.

Ispravno uskladite težine. Ako vaš CSS traži font-weight: 500, a definirate samo 400 i 700, preglednik može sintetizirati međutežinu. To nije uvijek strašno, ali može izgledati nedosljedno.

Korak 5: Uklonite vanjske Google Fonts pozive

Nakon dodavanja lokalnog CSS-a za fontove, uklonite stare udaljene pozive iz svojih predložaka.

Potražite:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?..." rel="stylesheet">

Također provjerite:

• Postavke teme u CMS platformama
• Tipografske panele u page-builder alatima
• Widgete trećih strana
• Tag managere
• Stare CSS importe poput @import url('https://fonts.googleapis.com/...')

Ovo posljednje je često. CSS @import za fontove obično je lošiji za performanse jer odgađa otkrivanje. Ako hostate sami, definirajte fontove izravno u glavnom CSS-u ili u CSS datoteci za fontove koja se učitava rano.

Rad na privatnosti često propadne jer timovi poprave očiti predložak, ali propuste skripte, widgete i naslijeđene embedove. Isti se obrazac pojavljuje u radu na privolama; naš vodič o tome što se promijenilo za cookies u 2026. koristan je suputnik ako šire smanjujete površinu prema trećim stranama.

Korak 6: Postavite cache zaglavlja

Datoteke fontova su statički asseti. Treba ih agresivno cacheirati ako su im nazivi verzionirani ili content-hashed.

Dobro produkcijsko zaglavlje je:

Cache-Control: public, max-age=31536000, immutable

Dugotrajno immutable cacheiranje koristite samo ako se URL mijenja kada se datoteka promijeni. Na primjer:

inter-latin-400.a8f3c2.woff2

ili verzionirana putanja:

/fonts/v2/inter-latin-400.woff2

Ako prepišete /fonts/inter-latin-400.woff2 bez promjene URL-a, neki korisnici mogu dugo zadržati staru datoteku. To je u redu dok ne prestane biti u redu. Verzioniranje izbjegava problem.

Također poslužujte fontove s ispravnim MIME tipom:

Content-Type: font/woff2

Većina modernih hosting platformi to obrađuje automatski, ali vrijedi provjeriti.

Korak 7: Razmotrite preload samo za kritični font

Preloading može pomoći pregledniku da ranije otkrije važan font:

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

Koristite to štedljivo. Preload za primarni font teksta iznad preklopa, ne za svaku težinu fonta. Pretjerani preloading natječe se s CSS-om, slikama i JavaScriptom.

Čak i za fontove s iste domene, uključite crossorigin na font preloadovima. Dohvaćanje fontova koristi CORS način, a njegovo izostavljanje u nekim postavkama može uzrokovati dvostruka preuzimanja.

Ako niste sigurni, testirajte. Nemojte slijepo kopirati preloadove samo zato što je to rekla neka kontrolna lista.

Korak 8: Testirajte privatnost i performanse

Testiranje je jednostavno.

Otvorite DevTools, ponovno učitajte stranicu s onemogućenim cacheom i filtrirajte panel Network po:

• fonts.googleapis.com
• fonts.gstatic.com
• .woff2
• font

Trebali biste vidjeti datoteke fontova poslužene s vlastite domene i nikakve zahtjeve prema Google Fonts.

Zatim testirajte s hladnim cacheom i toplim cacheom. Pri prvom posjetu fontovi bi se trebali preuzeti jednom. Pri kasnijim posjetima trebali bi dolaziti iz memorijskog ili diskovnog cachea, ovisno o pregledniku.

Provjerite pomak izgleda kada se font zamijeni. Ako naslovi skaču, metrike zamjenskog fonta previše se razlikuju od web-fonta. Vidljivi pomak možete smanjiti odabirom sličnijeg zamjenskog fonta ili korištenjem novijih CSS nadjačavanja metrika fonta kao što su size-adjust, ascent-override, descent-override i line-gap-override. To je naprednije, ali korisno za uglađena sučelja.

Na kraju, testirajte stranice u privatnom pregledavanju ili s uključenim blokatorima sadržaja. Jedna od prednosti samostalnog hostanja jest to što je manja vjerojatnost da će alati za privatnost slučajno blokirati vašu tipografiju.

Uobičajene pogreške koje treba izbjeći

Hostanje previše težina

Ovo je najčešći neuspjeh. Dvije težine često su dovoljne. Tri su obično sasvim dovoljno. Pet je znak problema u dizajn-sustavu osim ako imate snažan razlog.

Zaboravljanje kurziva

Ako vaš sadržaj koristi pravo naglašavanje, učitajte stvarnu italic datoteku. Sintetički kurziv može izgledati loše, osobito u duljem uredničkom sadržaju.

Zadržavanje stare Google CSS poveznice

Time poništavate svrhu. Nakon migracije nijedan zahtjev za font ne bi trebao ići prema Googleu, osim ako ga ne ubacuje neka druga komponenta.

Posluživanje fontova bez dugoročnog cacheiranja

Samostalno hostanje daje vam kontrolu. Iskoristite je. Fontovi su idealni kandidati za duga razdoblja cacheiranja.

Ignoriranje pravnog i dokumentacijskog rada

Ako je vaša politika privatnosti prethodno spominjala Google Fonts ili učitavanje fontova trećih strana, ažurirajte je nakon migracije. Ako održavate inventar obrade podataka, ažurirajte i njega. Tehnička promjena i evidencija usklađenosti trebaju se podudarati.

<!-- tool-cta:start -->

💡 Isprobajte ovo: Pretvorite TTF datoteke koje ste preuzeli s Google Fonts u WOFF2 koji se može samostalno hostati plus CSS pomoću Webfont Generator.

<!-- tool-cta:end -->

Jednostavna kontrolna lista za migraciju

1. Popišite obitelji fontova, težine, stilove i pisma koja zaista koristite.
2. Preuzmite WOFF2 datoteke i potvrdite licencu.
3. Sužavajte fontove ako stranica ima ograničene jezične potrebe.
4. Dodajte lokalna @font-face pravila s font-display: swap.
5. Uklonite sve Google Fonts link, preconnect i @import reference.
6. Poslužujte fontove s vlastite domene uz dugotrajna cache zaglavlja.
7. Preload samo najvažnijeg fonta iznad preklopa, ako testiranje to podržava.
8. Provjerite u DevTools da nema preostalih zahtjeva prema Google Fonts.
9. Po potrebi ažurirajte dokumentaciju o privatnosti.

Samostalno hostanje fontova nije glamurozan posao. To je vrsta malog infrastrukturnog čišćenja koja smanjuje rizik ovisnosti, poboljšava pristup privatnosti i daje vam predvidljivije prikazivanje. To je obično vrijedno sat ili dva koliko traje.