Jak hostovat fonty lokálně místo používání Google Fonts

Proč hostovat Google Fonts vlastními silami?

Google Fonts usnadnily dobrou typografii. Přidat stylesheet, vybrat několik řezů, nasadit stránku. Po mnoho let to byla pro malé týmy rozumná výchozí volba.

Má to ale kompromis: prohlížeč každého návštěvníka kontaktuje službu třetí strany, aby stáhl CSS fontů a samotné soubory fontů. To má dva důsledky.

Za prvé přidáváte do vykreslování externí závislost. Pokud je CSS fontu pomalé, blokované nebo nedostupné v regionu či síti uživatele, stránka čeká nebo použije náhradní font.

Za druhé vzniká otázka soukromí. Požadavek na font může třetí straně odhalit IP adresu uživatele, user agent, kontext referrer policy a časové informace. Google Fonts uvádí, že prostřednictvím Fonts API nenastavuje cookies, ale „žádné cookies“ neznamená totéž co „žádné osobní údaje“. Podle GDPR může být IP adresa v daném kontextu stále osobním údajem.

Vlastní hostování fontů není automaticky povinné pro každý web a toto není právní rada. Pro evropské weby, weby veřejného sektoru, zdravotnictví, vzdělávání, finance nebo jakýkoli tým, který se snaží omezit zbytečné požadavky na třetí strany, je ale lokální hostování obvykle čistší volbou.

Často je to také výkonnostní zlepšení, pokud se udělá správně. Klíčové je právě „správně“. Zkopírovat šest souborů fontů do /assets/fonts/ a načítat je všechny na každé stránce může být horší než používat hostovanou službu. Pokud chcete širší kontext výkonu, náš dřívější článek o tom, proč jsou webové fonty na většině webů stále nejsnazším výkonnostním zlepšením, rozebírá běžné vzorce plýtvání.

Co se změní, když hostujete fonty sami

Když používáte Google Fonts obvyklým způsobem, stránka dělá 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">

Prohlížeč nejprve požádá o CSS z fonts.googleapis.com a poté stáhne soubory fontů z fonts.gstatic.com.

Při vlastním hostování by stránka měla požadovat CSS i soubory fontů z vaší vlastní 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 odstraníte požadavek na font od třetí strany. Zároveň přebíráte odpovědnost za výběr formátů souborů, cache headerů, náhradních fontů a aktualizací.

Tuto odpovědnost je dobré brát vážně. Fonty leží na kritické cestě vykreslení. Špatně nastavené fonty mohou způsobit neviditelný text, posuny rozvržení a pomalé první vykreslení.

Krok 1: Zkontrolujte, co skutečně používáte

Než cokoli stáhnete, sepište rodiny fontů, řezy, styly a znakové sady, které váš web opravdu potřebuje.

Typický marketingový web může potřebovat:

• Regular 400 pro text odstavců
• Semibold 600 nebo bold 700 pro nadpisy a tlačítka
• Italic 400 jen tehdy, pokud design skutečně používá kurzívu
• Pouze latinku, pokud web nepodporuje více jazyků

Buďte podezřívaví k dávným výchozím nastavením design systému. Mnoho webů načítá 300, 400, 500, 600, 700, kurzívy a více písem jen proto, že je kdysi někdo vybral ve výběru fontů.

V browser DevTools otevřete panel Network, filtrujte podle „font“, znovu načtěte stránku a zkontrolujte, které soubory se vyžádají. Poté projděte CSS a podívejte se na použití font-weight. Pokud vaše CSS nikdy nepoužívá 300, nehostujte 300.

Pokud budete dopad později vyhodnocovat, Lighthouse může pomoci, ale neberte jeho skóre jako celý příběh. Používejte ho jako diagnostický nástroj, ne jako soudce. Máme samostatný návod, jak číst report Lighthouse bez paniky, který se hodí při prioritizaci oprav fontů.

Krok 2: Stáhněte správné soubory fontů

Google Fonts nabízí open-source fonty. Můžete je stáhnout z webu Google Fonts nebo z příslušného repozitáře projektu fontu. Zkontrolujte licenci, ale většina Google Fonts je distribuována pod otevřenými licencemi, jako je SIL Open Font License nebo Apache License.

Pro web preferujte WOFF2. Moderní prohlížeče ho široce podporují a obvykle je mnohem menší než TTF nebo OTF. V roce 2026 je přímé servírování TTF prohlížečům u veřejných webů jen zřídka ospravedlnitelné.

Rozumná struktura adresářů vypadá takto:

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

Používejte popisné názvy souborů. Za šest měsíců bude font.woff2 otravný. inter-latin-600.woff2 je nudný a užitečný.

Pokud váš web používá build systém, uchovávejte zdrojové fonty na jasném místě a nechte build pipeline kopírovat optimalizované soubory do veřejného adresáře assetů.

Krok 3: Kde to dává smysl, použijte subsetting

Subsetting znamená odstranění znaků, které nepotřebujete. Plný font může obsahovat latinku, cyrilici, řečtinu, vietnamštinu, symboly a mnoho funkcí OpenType. Pokud vaše anglická landing page potřebuje jen latinské znaky, subset může být dramaticky menší.

Existují dva běžné přístupy:

1. Použít předpřipravený subset od poskytovatele fontu nebo z repozitáře.
2. Vygenerovat vlastní subset pomocí nástroje na fonty, například pyftsubset z fonttools.

Pro mnoho týmů stačí předpřipravené subsety latinky. Vlastní subsetting je užitečný, když máte velmi omezené stránky, například jednu kampaňovou stránku s omezeným textem, nebo produktové UI s předvídatelným pokrytím znaků.

U vícejazyčných webů buďte opatrní. Chybějící glyfy způsobují míchání náhradních fontů, což může působit rozbitě a zhoršovat čitelnost. Pokud podporujete více jazyků, mapujte subsety fontů na jazykové routy místo toho, abyste všude vynucovali jeden malý subset.

Krok 4: Napište pravidla @font-face

Minimální lokální nastavení vypadá 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;
}

Na několika detailech zde záleží.

Pro většinu obsahových webů používejte font-display: swap. Říká prohlížeči, aby rychle zobrazil text náhradním fontem a poté po doručení webového fontu provedl výměnu. Tím se vyhnete nejhorší verzi FOIT: záblesku neviditelného textu.

Nastavte explicitní fallback stack. Pokud vlastní font selže, uživatelé by stále měli dostat čitelný text. Náhradní fonty nejsou dodatečná myšlenka; jsou součástí designu. Pokud potřebujete znovu projít velikosti, délku řádků a volby pro text odstavců, začněte praktickým průvodcem čitelnou typografií na moderním webu.

Správně párujte řezy. Pokud CSS žádá font-weight: 500, ale definujete jen 400 a 700, prohlížeč může syntetizovat mezilehlý řez. Není to vždy hrozné, ale může to vypadat nekonzistentně.

Krok 5: Odstraňte externí volání Google Fonts

Po přidání lokálního CSS pro fonty odstraňte stará vzdálená volání ze šablon.

Hledejte:

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

Zkontrolujte také:

• Nastavení šablon v CMS platformách
• Typografické panely page builderů
• Widgety třetích stran
• Tag managery
• Staré CSS importy jako @import url('https://fonts.googleapis.com/...')

Poslední případ je běžný. CSS @import pro fonty je obvykle horší pro výkon, protože oddaluje jejich objevení. Pokud fonty hostujete sami, definujte je přímo v hlavním CSS nebo v CSS souboru pro fonty načteném brzy.

Práce na soukromí často selhává proto, že týmy opraví zřejmou šablonu, ale přehlédnou skripty, widgety a staré embedy. Stejný vzorec se objevuje u práce se souhlasy; náš průvodce co se změnilo u cookies v roce 2026 je užitečný doplněk, pokud šířeji snižujete plochu třetích stran.

Krok 6: Nastavte cache headery

Soubory fontů jsou statické assety. Pokud mají verzované názvy nebo obsahový hash, měly by se cacheovat agresivně.

Dobrý produkční header je:

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

Dlouhodobé immutable cacheování používejte jen tehdy, když se URL změní při změně souboru. Například:

inter-latin-400.a8f3c2.woff2

nebo verzovaná cesta:

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

Pokud přepíšete /fonts/inter-latin-400.woff2 beze změny URL, někteří uživatelé si mohou starý soubor ponechat velmi dlouho. To je v pořádku, dokud není. Verzování tomuto problému předchází.

Fonty také servírujte se správným MIME typem:

Content-Type: font/woff2

Většina moderních hostingových platforem to řeší automaticky, ale stojí za to to ověřit.

Krok 7: Zvažte preload pouze kritického fontu

Preloading může prohlížeči pomoci objevit důležitý font dříve:

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

Používejte ho střídmě. Preloadujte primární font pro text nad ohybem stránky, ne každý řez fontu. Nadměrné preloadování soupeří s CSS, obrázky a JavaScriptem.

I u fontů ze stejného originu uvádějte u preloadů fontů crossorigin. Načítání fontů používá režim CORS a jeho vynechání může v některých nastaveních způsobit duplicitní stahování.

Pokud si nejste jistí, testujte. Nepřebírejte preloady slepě jen proto, že to říká checklist.

Krok 8: Otestujte soukromí a výkon

Testování je přímočaré.

Otevřete DevTools, znovu načtěte stránku s vypnutou cache a filtrujte panel Network podle:

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

Měli byste vidět soubory fontů servírované z vlastní domény a žádné požadavky na Google Fonts.

Poté testujte se studenou i teplou cache. Při první návštěvě by se fonty měly stáhnout jednou. Při pozdějších návštěvách by měly přijít z paměti nebo diskové cache podle prohlížeče.

Zkontrolujte posun rozvržení při výměně fontu. Pokud nadpisy poskakují, metriky náhradního fontu se příliš liší od webového fontu. Viditelný posun můžete snížit výběrem bližšího náhradního fontu nebo použitím novějších CSS úprav metrik fontu, jako jsou size-adjust, ascent-override, descent-override a line-gap-override. Jsou pokročilejší, ale užitečné pro vyladěná rozhraní.

Nakonec otestujte stránky v anonymním režimu nebo se zapnutými blokátory obsahu. Jednou z výhod vlastního hostování je, že nástroje na ochranu soukromí méně pravděpodobně omylem zablokují vaši typografii.

Časté chyby, kterým se vyhnout

Hostování příliš mnoha řezů

To je nejčastější selhání. Dva řezy často stačí. Tři jsou obvykle bohatě dost. Pět je varovný signál v design systému, pokud k tomu nemáte silný důvod.

Zapomenutí na kurzívu

Pokud váš obsah používá skutečné zvýraznění, načtěte skutečný soubor kurzívy. Syntetická kurzíva může vypadat špatně, zejména v delším redakčním obsahu.

Ponechání starého odkazu na Google CSS

Tím ztratíte smysl celé změny. Po migraci by žádný požadavek na font neměl směřovat na Google, pokud ho nevkládá jiná komponenta.

Servírování fontů bez dlouhodobého cacheování

Vlastní hostování vám dává kontrolu. Využijte ji. Fonty jsou ideální kandidáti na dlouhé životnosti cache.

Ignorování právní a dokumentační práce

Pokud vaše zásady ochrany osobních údajů dříve zmiňovaly Google Fonts nebo načítání fontů od třetích stran, po migraci je aktualizujte. Pokud vedete evidenci zpracování dat, aktualizujte i ji. Technická změna a compliance záznam by měly souhlasit.

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

💡 Vyzkoušejte toto: Převeďte soubory TTF, které jste stáhli z Google Fonts, na samohostovatelné WOFF2 plus CSS pomocí Webfont Generator.

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

Jednoduchý migrační checklist

1. Sepište rodiny fontů, řezy, styly a písma, které skutečně používáte.
2. Stáhněte soubory WOFF2 a ověřte licenci.
3. Pokud má web omezené jazykové potřeby, vytvořte subsety fontů.
4. Přidejte lokální pravidla @font-face s font-display: swap.
5. Odstraňte všechny reference Google Fonts typu link, preconnect a @import.
6. Servírujte fonty z vlastní domény s dlouhodobými cache headery.
7. Preloadujte pouze nejdůležitější font nad ohybem stránky, pokud to testování podporuje.
8. Ověřte v DevTools, že nezůstaly žádné požadavky na Google Fonts.
9. V případě potřeby aktualizujte dokumentaci k ochraně soukromí.

Vlastní hostování fontů není okázalá práce. Je to typ drobného úklidu infrastruktury, který snižuje riziko závislostí, zlepšuje ochranu soukromí a dává předvídatelnější vykreslování. To za hodinu nebo dvě práce obvykle stojí.