Jak načítat Google Fonty z vlastního serveru a v souladu s GDPR

Google Fonts se zasloužily o to, že weby nevypadají jako přes kopírovák, vykreslené jen s pomocí písem Arial a Times New Roman. Webařina je díky nim mnohem kreativnější. Použití Google Fontů je navíc velmi snadné. Najdete si na webu písmo, které se vám líbí, nástroj vám vygeneruje kód pro vložení do HTML či CSS a máte hotovo.

Dříve bylo výhodou pro návštěvníka rovněž použití CDN. Pokud jste procházeli více webů, které měly stejné písmo, pak se vám toto písmo uložilo do cache a při návštěvě dalšího webu načítajícího stejný font od Google se písmo tahalo už rovnou z mezipaměti prohlížeče. Od zákazu cross domain cacheování to už neplatí.

Na druhé straně od snadné implementace Google Fonts stojí občas prodloužený interval načítání, protože prohlížeč musí udělat několik spojení na další server.

Tipuji ale, že za mnohem větší oříšek bude většina z vás považovat rozhodnutí mnichovského soudu, že vkládání písma načítaného z Google Fonts je v rozporu s GDPR. Viz zpráva na Lupě a text od soudu. Problém je ve sběru IP adres návštěvníka webu, ke kterému na straně serveru Google dochází.

Jak na self-hosted Google Fonty

Pojďme se tedy podívat, jak upravit načítání fontů od Google tak, aby se tahaly přímo z vašeho serveru, resp. zkrátka z místa, kde máte umístěný web.

Pomůže vám s tím služba Google Webfonts Helper.

1. Po načtení si zvolíte na levé straně písma, která potřebujete do webu zakomponovat. Posléze v hlavním okně zaklikněte znakovou sadu. Pro české použití je potřeba zapnout latin-ext, což v poslední době dělaly Google Fonts automaticky.
2. Zaklikněte řezy písma, které budete na svém webu používat. Všimněte si, jak se spolu s tím mění vygenerovaný zápis do CSS.
3. Ve třetím kroku přepněte generátor z Best support (kompatibilita pro všechno možné) na Modern Browsers. Tím zajistíte, že se budou používat jen písma ve formátech woff, woff2, které dnes už běží všude. Je zbytečné stahovat navíc EOT a TTF.
4. Upravte si cestu ke složce, do které písma dáte, aby odpovídala relativnímu zápisu v CSS. Kód se pak přegeneruje.
5. Stáhněte si ZIP se soubory písma a rozbalte jej do webu do zvolené složky. Poté vykopírujte připravený zápis a vložte jej na začátek do svého CSS.
6. Použití písma je pak v kódu stejné, jako jste byli doposud zvyklí. Jestliže jste měli v HTML načítání písma ve značce <link>, spolu s přednačtením ze serverů Google, můžete to smazat.

Tip: pravděpodobně hned po úpravě zjistíte, že se písmo sice načítá v pohodě, ale text nepříjemně bliká. Respektive načte se stránka a až následně se zobrazí některé texty. Řešení je jednoduché. Do připravených definicí @font-face{…} si doplňte font-display: swap; Text pak bude viditelný normálně. Google Fonty toto mají posledních pár let automaticky, generátor z nějakého důvodu na vlastnost font-display zapomíná.