Ako hostovať fonty lokálne namiesto používania Google Fonts

Prečo hostovať Google Fonts sami?

Google Fonts uľahčili dobrú typografiu. Pridáte stylesheet, vyberiete niekoľko hrúbok, publikujete stránku. Roky to bola rozumná predvolená voľba pre malé tímy.

Kompromisom je, že prehliadač každého návštevníka kontaktuje službu tretej strany, aby načítal CSS fontov a súbory fontov. Má to dva dôsledky.

Po prvé, pridáva to externú závislosť do vykresľovania. Ak je CSS fontu pomalé, blokované alebo nedostupné v regióne či sieti používateľa, vaša stránka čaká alebo použije náhradný font.

Po druhé, vzniká otázka súkromia. Požiadavka na font môže tretej strane odhaliť IP adresu používateľa, user agent, kontext referrer policy a časové údaje. Google Fonts uvádza, že cez Fonts API nenastavuje cookies, ale „žiadne cookies“ nie je to isté ako „žiadne osobné údaje“. Podľa GDPR môže byť IP adresa v kontexte stále osobným údajom.

Vlastné hostovanie fontov nie je automaticky povinné pre každý web a nejde o právne poradenstvo. No pre európske weby, weby verejného sektora, zdravotníctvo, vzdelávanie, financie alebo akýkoľvek tím, ktorý sa snaží znížiť zbytočné požiadavky na tretie strany, je lokálne hostovanie zvyčajne čistejšia voľba.

Často je to aj výkonnostné zlepšenie, ak sa urobí dobre. Háčik je v slovách „urobí dobre“. Skopírovať šesť súborov fontov do /assets/fonts/ a načítavať ich všetky na každej stránke môže byť horšie než používať hostovanú službu. Ak chcete širší výkonnostný kontext, náš skorší článok o tom, prečo webové fonty stále predstavujú najjednoduchšie výkonnostné zlepšenie na väčšine webov, pokrýva bežné vzorce plytvania.

Čo sa zmení pri vlastnom hostovaní

Keď používate Google Fonts obvyklým spôsobom, vaša stránka robí toto:

<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">

Prehliadač najprv požiada o CSS z fonts.googleapis.com a potom stiahne súbory fontov z fonts.gstatic.com.

Pri vlastnom hostovaní by vaša stránka mala žiadať CSS aj súbory fontov z vašej vlastnej domény:

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

Tým odstránite požiadavku na font tretej strany. Zároveň preberáte zodpovednosť za výber formátov súborov, hlavičky cache, náhradné fonty a aktualizácie.

Túto zodpovednosť sa oplatí brať vážne. Fonty ležia na kritickej ceste vykresľovania. Zlé nastavenie fontov môže spôsobiť neviditeľný text, posuny rozloženia a pomalé prvé vykreslenie.

Krok 1: Auditujte, čo skutočne používate

Skôr než čokoľvek stiahnete, spíšte rodiny fontov, hrúbky, štýly a znakové sady, ktoré váš web naozaj potrebuje.

Typický marketingový web môže potrebovať:

• Regular 400 pre text tela
• Semibold 600 alebo bold 700 pre nadpisy a tlačidlá
• Italic 400 iba vtedy, ak dizajn skutočne používa kurzívu
• Iba latinskú znakovú sadu, pokiaľ web nepodporuje viac jazykov

Buďte podozrievaví voči starým predvoleným nastaveniam dizajnových systémov. Mnohé weby načítavajú 300, 400, 500, 600, 700, kurzívy a viacero písiem len preto, že ich niekto kedysi vybral vo výbere fontov.

V browser DevTools otvorte panel Network, filtrujte podľa „font“, znovu načítajte stránku a skontrolujte, ktoré súbory sa žiadajú. Potom skontrolujte CSS a používanie font-weight. Ak vaše CSS nikdy nepoužíva 300, nehostujte 300.

Ak budete dopad hodnotiť neskôr, Lighthouse môže pomôcť, no jeho skóre neberte ako celý príbeh. Používajte ho ako diagnostický nástroj, nie ako sudcu. Máme samostatný návod na čítanie reportu Lighthouse bez paniky, ktorý je užitočný pri prioritizácii opráv fontov.

Krok 2: Stiahnite správne súbory fontov

Google Fonts ponúka open-source fonty. Môžete si ich stiahnuť z webu Google Fonts alebo z príslušného repozitára projektu fontu. Skontrolujte licenciu, no väčšina Google Fonts sa distribuuje pod otvorenými licenciami, ako sú SIL Open Font License alebo Apache License.

Pre web uprednostnite WOFF2. Moderné prehliadače ho široko podporujú a zvyčajne je oveľa menší než TTF alebo OTF. V roku 2026 je pri verejných weboch priame servírovanie TTF prehliadačom málokedy opodstatnené.

Rozumná štruktúra adresárov vyzerá takto:

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

Používajte opisné názvy súborov. O šesť mesiacov bude font.woff2 otravný. inter-latin-600.woff2 je nudný a užitočný.

Ak váš web používa build systém, uložte zdrojové fonty na jasné miesto a nechajte build pipeline skopírovať optimalizované súbory do verejného adresára assets.

Krok 3: Kde je to vhodné, vytvorte podmnožiny fontov

Vytváranie podmnožín znamená odstránenie znakov, ktoré nepotrebujete. Plný font môže obsahovať latinku, cyriliku, gréčtinu, vietnamčinu, symboly a množstvo funkcií OpenType. Ak vaša anglická landing page potrebuje iba latinské znaky, podmnožina môže byť výrazne menšia.

Existujú dva bežné prístupy:

1. Použiť vopred pripravenú podmnožinu od poskytovateľa fontu alebo z repozitára.
2. Vygenerovať vlastnú podmnožinu pomocou nástroja na fonty, napríklad pyftsubset z fonttools.

Pre mnohé tímy sú vopred pripravené latinské podmnožiny dostatočné. Vlastné podmnožiny sú užitočné pri veľmi obmedzených stránkach, napríklad pri jednej kampani s obmedzeným textom, alebo v produktovom UI s predvídateľným pokrytím znakov.

Pri viacjazyčných weboch buďte opatrní. Chýbajúce glyfy spôsobujú miešanie náhradných fontov, čo môže pôsobiť rozbito a zhoršiť čitateľnosť. Ak podporujete viac jazykov, mapujte podmnožiny fontov na jazykové trasy namiesto toho, aby ste všade vnucovali jednu malú podmnožinu.

Krok 4: Napíšte pravidlá @font-face

Minimálne lokálne nastavenie vyzerá takto:

@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;
}

Tu záleží na niekoľkých detailoch.

Pre väčšinu obsahových webov používajte font-display: swap. Hovorí prehliadaču, aby rýchlo zobrazil text náhradným fontom a potom po doručení webového fontu font vymenil. Tým sa vyhnete najhoršej verzii FOIT: záblesku neviditeľného textu.

Nastavte explicitný zoznam náhradných fontov. Ak vlastný font zlyhá, používatelia by mali stále dostať čitateľný text. Náhradné fonty nie sú dodatočná myšlienka; sú súčasťou dizajnu. Ak sa potrebujete vrátiť k veľkostiam, dĺžke riadkov a voľbám textu tela, začnite s praktickým sprievodcom čitateľnou typografiou na modernom webe.

Správne párujte hrúbky. Ak vaše CSS žiada font-weight: 500, ale definujete iba 400 a 700, prehliadač môže syntetizovať medzistupeň. Nie je to vždy hrozné, ale môže to pôsobiť nekonzistentne.

Krok 5: Odstráňte externé volania Google Fonts

Po pridaní lokálneho CSS fontov odstráňte zo šablón staré vzdialené volania.

Hľadajte:

<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">

Skontrolujte aj:

• Nastavenia témy v CMS platformách
• Typografické panely page builderov
• Widgety tretích strán
• Tag managery
• Staré CSS importy, napríklad @import url('https://fonts.googleapis.com/...')

To posledné je bežné. CSS @import pre fonty je zvyčajne horší pre výkon, pretože odďaľuje objavenie zdroja. Ak hostujete sami, definujte fonty priamo v hlavnom CSS alebo v súbore CSS pre fonty, ktorý sa načíta skoro.

Práca na súkromí často zlyhá preto, že tímy opravia zjavný template, ale prehliadnu skripty, widgety a staré embedy. Rovnaký vzorec sa objavuje pri práci so súhlasmi; náš sprievodca tým, čo sa zmenilo pri cookies v roku 2026, je užitočným doplnkom, ak širšie znižujete plochu tretích strán.

Krok 6: Nastavte hlavičky cache

Súbory fontov sú statické assets. Ak sú ich názvy verziované alebo obsahujú hash obsahu, mali by sa cacheovať agresívne.

Dobrá produkčná hlavička je:

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

Dlhodobé immutable cacheovanie používajte iba vtedy, ak sa URL zmení pri zmene súboru. Napríklad:

inter-latin-400.a8f3c2.woff2

alebo verziovaná cesta:

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

Ak prepíšete /fonts/inter-latin-400.woff2 bez zmeny URL, niektorým používateľom môže starý súbor zostať dlho. To je v poriadku, až kým nie je. Verziovanie tomuto problému predchádza.

Fonty servírujte aj so správnym MIME typom:

Content-Type: font/woff2

Väčšina moderných hostingových platforiem to rieši automaticky, ale oplatí sa to overiť.

Krok 7: Zvážte preload iba kritického fontu

Preload môže pomôcť prehliadaču objaviť dôležitý font skôr:

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

Používajte ho striedmo. Preloadujte primárny textový font viditeľný bez posúvania, nie každú hrúbku fontu. Nadmerný preload súťaží s CSS, obrázkami a JavaScriptom.

Aj pri fontoch z rovnakej origin domény zahrňte crossorigin pri preload fontov. Načítavanie fontov používa CORS mode a jeho vynechanie môže v niektorých nastaveniach spôsobiť duplicitné sťahovanie.

Ak si nie ste istí, testujte. Nekopírujte preloads mechanicky len preto, že to tvrdil checklist.

Krok 8: Otestujte súkromie a výkon

Testovanie je priamočiare.

Otvorte DevTools, znovu načítajte stránku s vypnutou cache a filtrujte panel Network podľa:

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

Mali by ste vidieť súbory fontov servírované z vašej vlastnej domény a žiadne požiadavky na Google Fonts.

Potom testujte so studenou aj teplou cache. Pri prvej návšteve by sa fonty mali stiahnuť raz. Pri ďalších návštevách by mali prísť z pamäte alebo diskovej cache podľa prehliadača.

Skontrolujte posun rozloženia pri výmene fontu. Ak nadpisy poskakujú, metriky náhradného fontu sa príliš líšia od webového fontu. Viditeľný posun môžete znížiť výberom bližšieho náhradného fontu alebo použitím novších CSS prepisov metrík fontu, ako sú size-adjust, ascent-override, descent-override a line-gap-override. Sú pokročilejšie, ale užitočné pre vyladené rozhrania.

Nakoniec otestujte stránky v súkromnom prehliadaní alebo so zapnutými blokátormi obsahu. Jednou z výhod vlastného hostovania je, že nástroje na ochranu súkromia menej pravdepodobne omylom zablokujú vašu typografiu.

Bežné chyby, ktorým sa treba vyhnúť

Hostovanie príliš mnohých hrúbok

Toto je najčastejšie zlyhanie. Dve hrúbky často stačia. Tri sú zvyčajne viac než dosť. Päť je podozrivý signál v dizajnovom systéme, pokiaľ na to nemáte silný dôvod.

Zabudnutie na kurzívy

Ak váš obsah používa skutočné zvýraznenie, načítajte skutočný súbor kurzívy. Syntetické kurzívy môžu vyzerať slabo, najmä v dlhšom redakčnom obsahu.

Ponechanie starého odkazu na Google CSS

Tým sa míňa pointa. Po migrácii by žiadna požiadavka na font nemala ísť do Google, pokiaľ ju nevkladá iný komponent.

Servírovanie fontov bez dlhodobého cacheovania

Vlastné hostovanie vám dáva kontrolu. Využite ju. Fonty sú ideálni kandidáti na dlhé životnosti cache.

Ignorovanie právnej a dokumentačnej práce

Ak vaše zásady ochrany súkromia predtým spomínali Google Fonts alebo načítavanie fontov tretích strán, po migrácii ich aktualizujte. Ak vediete inventár spracúvania údajov, aktualizujte aj ten. Technická zmena a záznamy o súlade by mali sedieť.

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

💡 Vyskúšajte toto: Preveďte súbory TTF, ktoré ste stiahli z Google Fonts, na samostatne hostovateľné WOFF2 plus CSS pomocou Webfont Generator.

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

Jednoduchý migračný checklist

1. Spíšte rodiny fontov, hrúbky, štýly a písma, ktoré skutočne používate.
2. Stiahnite súbory WOFF2 a potvrďte licenciu.
3. Vytvorte podmnožiny fontov, ak má web obmedzené jazykové potreby.
4. Pridajte lokálne pravidlá @font-face s font-display: swap.
5. Odstráňte všetky odkazy Google Fonts link, preconnect a @import.
6. Servírujte fonty z vlastnej domény s dlhodobými hlavičkami cache.
7. Preloadujte iba najdôležitejší font viditeľný bez posúvania, ak to testovanie podporí.
8. Overte v DevTools, že nezostali žiadne požiadavky na Google Fonts.
9. V prípade potreby aktualizujte dokumentáciu k súkromiu.

Vlastné hostovanie fontov nie je očarujúca práca. Je to typ malého infraštruktúrneho upratovania, ktoré znižuje riziko závislostí, zlepšuje ochranu súkromia a dáva vám predvídateľnejšie vykresľovanie. To zvyčajne stojí za tú hodinu či dve, ktoré si vyžiada.