Jak na webové fonty (nejen) ve WordPressu

Fonty, neboli písma, jsou dnes nedílnou součástí designu webových stránek. Používáme je jak pro lepší čitelnost textů, ale stále více i jako grafické prvky. Koneckonců jako písma jsou na webu často načítány i mnohé ikony.

A rozhodně je, co řešit. Od samotného výběru, až po optimalizaci načítání. V redakčním systému WordPress řadu věcí zvládne vyřešit i člověk, který s kódem pracovat nechce, ale tipy jsou platné i pro jiné platformy či ručně kódované weby.

Kde fonty brát

Podobně jako obrázky či jiná díla, tak i fonty podléhají různým licencím. Nelze tedy pro všechny účely používat jakýkoliv font, který se vám nabídne. Především speciální fonty jsou pak obvykle placené.

V dnešní době si však většina z nás vystačí s databází Google Fonts, která obsahuje přes tisíc různých fontů. Zároveň i poskytuje možnost z fonty načítat přímo ze serverů Googlu. Vybrat si můžete buď kompletní písmo, nebo jen určité styly, které budete používat a ušetřit tak čas při jejich načítání.

Chcete-li zobrazovat českou diakritiku, pak vás bude vždy zajímat, zda dané písmo podporuje jazyk „Latin Extended“, kde jsou právě i české znaky. Rozhodně si i tak písmo vyzkoušejte předem, ne vždy se mohou české znaky zobrazovat při ztučnění apod. Chybí-li daný znak, nahradí se jiným písmem, což nevypadá vůbec dobře.

Jak fonty dostat do WordPressu

WordPress nabízí v podstatě 3 možnosti, jak načítat fonty:

1. Jsou součástí šablony (můžete si je vybrat v nastavení/Přizpůsobení šablony)
2. Můžete je do kódu vložit ručně (třeba přes import v CSS)
3. Nainstalujete si plugin

Většina šablon dnes obsahuje právě napojení na Google Fonts. Jsou-li pro vás fonty zásadní, pak to možná bude důležité kritérium při jejím výběru. V přizpůsobení si pak můžete vybrat jaký font se pro dané prvky použije. Podobně to mají i nejrůznější page buildery.

U starších či jednodušších šablon si budete muset poradit s úpravou kódu, případně se poohlédnout po nějakém pluginu, který s tím pomůže.

Ve chvíli, kdy máte (např. od placeného fontu) k dispozici přímo soubory, tak se vám může hodit plugin Custom Fonts. Své vlastní fonty si můžete přidávat jako by to byly příspěvky. Zároveň je rovnou integruje i do page builderů.

https://wordpress.org/plugins/custom-fonts/

Proč používat System Font Stack

Webové fonty a především Google Fonts byly před několika lety velkým trendem. Najít písmo či integrovat možnost výběru ze stovek různých rovnou do šablony. Jenže každý font navíc znamená požadavek, stažení a vykreslení. To jsou milisekundy, které ve výsledku nemusí být neznatelné pro návštěvníky.

Došlo tak ke „znovuobjevení“ tzv. System Font Stack“. Takto jsou označovány fonty, které mají operační systémy standardně nainstalovány. Nemusí být nejkrásnější, ale už jsou nainstalované. Nemusí se tedy stahovat znovu a znovu. Především pro webové stránky, kde jde spíše o obsah, to může být možnost jak jejich načítání výrazně zrychlit. Zároveň odpadá problém s „problikáváním“, tedy situací, kdy se načte zástupný fonty, než je stažen ten, který má být zobrazen primárně.

Zlepšení načítání fontů ve WordPressu

Po optimalizaci obrázků, stylů a skriptů obvykle dojde řada i na fonty. Jak už bylo zmíněno, každý font navíc načítání webu zpomalí. Proto se obvykle používají maximálně 2 fonty, protože při více už to může být znát.

Optimalizační techniky a pluginy s fonty dnes počítají. Načítat je totiž lze různě, ale výsledný efekt není stejný. Někdy text nebude vidět, jindy problikne záložní font. S příchodem GDPR se však dostalo do popředí také jejich lokální načítání.

Načítat fonty třeba ze serverů Googlu je pohodlné a snadné, ale je to jiný server, ke kterému se musí návštěvník ještě připojit. Nemusí jít tedy jen o ochranu soukromí návštěvníků, ale i rychlost načítání, která hovoří ve prospěch fontů načítaných z vaší domény. Ne každý si šablonu programuje, nebo chce měnit kód. Je zde však výborný plugin OMFG:

https://wordpress.org/plugins/host-webfonts-local/

OMFG automaticky detekuje Google Fonts na webu a stáhne je jako lokální kopie. Žádné zbytečné DNS dotazy. To umožňuje také načítání těchto fontů z vámi vybrané CDN. U některých webů je to velmi pozitivně znát, nejen na různých aplikacích hodnotících skóre webu, ale především z pohledu uživatele.