Fonty a rychlost webu

Písmo je první věc, kterou návštěvník uvidí, a často také první věc, která web zdrží. U českých webů se navíc přidává právní rovina, protože Google Fonts posílají IP adresu návštěvníka do USA.

Google Fonts a GDPR: rozsudek, který změnil pravidla

V lednu 2022 rozhodl Zemský soud v Mnichově, že vložení Google Fonts přímo ze serverů Googlu předává IP adresu návštěvníka do USA bez souhlasu. Provozovatel webu měl zaplatit sto eur odškodného. Rozsudek se týkal jednoho případu, ale spustil v Německu a Rakousku vlnu hromadných výzev k zaplacení.

V Česku zatím Úřad pro ochranu osobních údajů takové případy plošně neřeší. To ale neznamená, že je situace v pořádku. Pokud vyplňujete záznamy o činnostech zpracování nebo procházíte auditem u většího zákazníka, dotaz na externí fonty přijde. Odpověď, že fonty hostujete lokálně, ten hovor rychle ukončí.

Praktický pohled je jednodušší než ten právní. Lokální fonty jsou rychlejší, protože odpadá spojení na cizí doménu. Sdílená cache mezi weby u Google Fonts skončila už v roce 2020, kdy prohlížeče zavedly rozdělenou cache. Argument pro externí načítání tím zmizel úplně a zbyla jen pohodlnost při kopírování kódu.

Lokální hostování krok za krokem

Převod trvá u běžného webu půl hodiny. Stáhnete soubory woff2, nahrajete je k sobě, přidáte deklarace font-face do stylu a smažete odkaz na cizí doménu. Formát woff2 dnes stačí, starší formáty už nikdo nepotřebuje. Každý řez pak váží zhruba osmnáct až třicet kilobajtů včetně české diakritiky.

Poslední krok lidé přeskakují a pak se diví. Ve WordPressu tahá fonty šablona, ale často i formulářový plugin, slider a stavitel stránek, každý zvlášť. Po převodu si otevřete záložku Network v nástrojích prohlížeče a vyfiltrujte požadavky na cizí domény. Když tam ještě něco svítí, práce hotová není.

Předběžné načtení používejte střídmě. Preload má smysl pro jeden nebo dva soubory, které jsou vidět hned, typicky pro řez nadpisu. Kdo předběžně načte osm souborů, zabere přenosové pásmo a zpozdí obrázek, který návštěvník vidí jako první. Méně je v tomhle případě opravdu víc a na měření je to vidět.

• stáhnout řezy včetně sady latin-ext s českou diakritikou
• nahrát soubory woff2 k sobě a nastavit jim dlouhou cache
• přidat deklarace font-face s vlastností font-display
• předběžně načíst jen ten řez, který je vidět na první obrazovce
• odstranit veškeré odkazy na domény fonts.googleapis.com a fonts.gstatic.com
• projít pluginy a šablonu, jestli fonty netahají znovu

font-display a blikání textu

Než se font stáhne, musí prohlížeč rozhodnout, co zobrazí. Buď nechá místo prázdné, čemuž se říká FOIT, nebo vysází text náhradním písmem a pak ho přepne, tedy FOUT. Vlastnost font-display určuje, která varianta nastane a jak dlouho prohlížeč čeká. Výchozí chování je nejhorší možné, protože text schová na tři sekundy.

Hodnota swap je bezpečná volba pro texty. Návštěvník uvidí obsah okamžitě náhradním písmem a po načtení se přepne. Nevýhoda je viditelný skok, hlavně když se náhradní a cílové písmo liší šířkou. Hodnota optional je vhodná tam, kde vám na přesném písmu tolik nezáleží, protože při pomalém připojení font vůbec nenasadí.

Skok se dá skoro schovat. Vyberte náhradní písmo s podobnými proporcemi a doladěte ho vlastnostmi size-adjust a ascent-override v deklaraci záložního fontu. U webu právničky z Brna to srazilo posun v metrice CLS z nula celá jedenáct na nula celá nula tři a text se přitom zobrazil hned.

Kolik řezů opravdu potřebujete

Nejčastější příčina pomalých fontů není samotné písmo, ale počet řezů. Designér vybere rodinu, klikne na osm tlouštěk plus kurzívy a stránka stahuje dvě stě dvacet kilobajtů písma. Přitom typický firemní web vystačí se dvěma až třemi řezy a nikdo si ničeho nevšimne. Rozdíl je sto padesát kilobajtů na každém prvním načtení.

Proměnný font je dobrý kompromis. Jeden soubor obsahuje celý rozsah tlouštěk a váží obvykle podobně jako dva až tři statické řezy. Vyplatí se od chvíle, kdy potřebujete čtyři a víc tlouštěk. U dvou řezů je statická varianta pořád menší, takže se rozhoduji podle konkrétního projektu a jeho typografie.

Druhá rodina písma je luxus, který si účtuje sám. Kombinace patkového nadpisu a bezpatkového textu vypadá dobře, ale zdvojnásobí počet souborů. Pokud na ní trváte, omezte druhou rodinu na jediný řez a použijte ji jen na nadpisy, ne na popisky a menu, kde ji stejně nikdo neocení.

• základní tloušťka čtyři sta pro běžný text
• polotučná šest set nebo sedm set pro nadpisy a tlačítka
• kurzíva jen tehdy, když ji obsah skutečně používá
• druhá rodina maximálně jedna, na nadpisy nebo na patičku
• proměnný font, pokud potřebujete čtyři a víc tlouštěk
• žádné falešné ztučnění prohlížečem, vypadá to levně

Subsetting a česká diakritika

Základní znaková sada latin neobsahuje písmena jako ě, š, č, ř, ž ani ů. Kdo ji použije, uvidí na webu text poskládaný ze dvou různých písem, protože prohlížeč chybějící znaky doplní ze systémového fontu. Vypadá to nedbale a nejčastěji se to projeví právě na slovech jako Řekněte nebo Věříme.

Řešení je stáhnout sadu latin-ext, která českou diakritiku obsahuje. Cena je zhruba čtyři až osm kilobajtů navíc na řez. Pokud chcete jít dál, vlastním subsetem pomocí nástroje pyftsubset odstraníte znaky, které na webu nikdy nepoužijete, a soubor zmenšíte o třicet až šedesát procent původní velikosti.

Subset dává smysl u projektů s licencovaným písmem a u vícejazyčných webů, kde by se jinak zbytečně stahovaly řecké a cyrilské znaky. U jednoduchého firemního webu je to práce navíc s malým přínosem. Rozhoduje objem provozu, ne princip. Při padesáti návštěvách denně to nikdo nepozná, při pěti tisících už ano.

Náklady a licence

Převod na lokální fonty účtuji od tisíce devíti set korun. V ceně je stažení řezů, deklarace, nastavení font-display, předběžné načtení a kontrola, že už nic neodchází na cizí domény. U WordPressu s několika pluginy to bývá o hodinu delší, protože fonty tahá víc míst najednou a je potřeba je najít všechna.

Licence je druhá věc, kterou lidé podceňují. Písma z Google Fonts jsou pod licencí SIL OFL a lze je použít komerčně i lokálně hostovaná. Komerční písmo od českého nebo zahraničního písmolijce se ale licencuje zvlášť pro web a cena se odvíjí od počtu měsíčních zobrazení stránky.

Ve svých projektech kombinuji Syne, Instrument Serif a JetBrains Mono, tedy otevřená písma s vlastním charakterem. Web od devatenácti tisíc devíti set devadesáti korun je má lokálně hostované od začátku, s vybranými řezy a s nastaveným font-display. Neúčtuji to zvlášť, protože je to prostě součást řemesla.

Časté otázky

Hrozí mi v Česku pokuta za Google Fonts?

Plošné pokutování zatím neprobíhá, německý rozsudek z roku 2022 ale ukázal, kam to míří. Riziko je spíš v tom, že u auditu, veřejné zakázky nebo u většího zákazníka dostanete dotaz na předávání dat do USA. Převod na lokální fonty trvá půl hodiny a zároveň web zrychlí, takže se hádka nevyplatí.

Kolik řezů písma si můžu dovolit, aby web zůstal rychlý?

Dva až tři na běžný firemní web. Základní tloušťka na text, polotučná na nadpisy a případně kurzíva, pokud ji obsah reálně používá. Každý řez ve formátu woff2 s českou diakritikou váží kolem dvaceti až třiceti kilobajtů. Osm řezů znamená dvě stě dvacet kilobajtů, které stahuje každý nový návštěvník.

Proč mi po načtení webu blikne text jiným písmem?

Tomu jevu se říká FOUT. Prohlížeč vysází text náhradním systémovým písmem a po stažení vašeho fontu ho přepne. Bez toho by text tři sekundy vůbec nebyl vidět, takže jde o menší zlo. Skok zmírníte volbou náhradního písma s podobnými proporcemi a vlastnostmi size-adjust a ascent-override v deklaraci.