Webfonty – použití vlastního písma v šabloně webu

Každý by chtěl mít na svém webu písmo podle svých představ, obzvláště u firemních webů, kde se musíme držet nastavené korporátní identity. Použití vlastního fontu na webu nemusí být takový problém, jak se může na první pohled zdát, font stačí takzvaně “nalinkovat”. Možností, jak toho dosáhnout, je několik a každá z nich má své výhody i nevýhody.

Nejprve je však potřeba uvědomit si, která písma můžeme na webu bezpečně používat bez toho, aniž bychom uživateli nutili stahování dodatečných souborů. K tomu nám pomůže například služba CSS Font Stack. Díky tomu hned vidíme, že například všem známý font Arial je bezpečné používat na systému Windows i Mac.

Formáty webových fontů

K tomu, abychom mohli vlastní písmo používat na webu, musíme ho mít ve formátu, který webové prohlížeče znají a dokážou s ním efektivně pracovat. Mezi dnes už zastaralé formáty patří TTF, OTF, SVG a EOT, kterými se už ani nebudeme zabývat. Tyto formáty jsou pro použití na webu už opravdu historie. V současné době existují formáty WOFF a WOFF2, které jsou už opravdovými formáty webových fontů a jsou optimalizované právě pro použití na webu. Oproti starším formátům nabízí násobně lepší datovou kompresi, stahování vlastního fontu tak uživatele tolik nezatěžuje.

Podrobnější informace o webových fontech najdete na webu w3schools.com.

Převod fontu do WOFF a WOFF2

Font od grafika dostaneme nejčastěji ve formátu TTF nebo OTF, abychom ho tedy mohli na webu použit, potřebujeme ho do webového formátu převést. K tomu můžeme použit online nástroj Font Squirrel, který je zdarma a nabízí spoustu možností nastavení.

Na výběr máme ze základního, optimálního nebo pokročilého režimu pro experty. V pokročilém režimu se doporučuji zaměřit na nastavení Subsetting, kde si zvolíme, jaké znaky chceme do webfontu zahrnout. Samozřejmě platí, čím více znaků font obsahuje, tím je datově náročnější. Pokud ale chceme mít jistotu, že font bude obsahovat všechny potřebné znaky, zaškrtneme No Subsetting. To doporučuji hlavně u vícejazyčných webů. U webů v češtině, slovenštině a podobných jazycích je potřeba zahrnout minimálně znaky z tzv. rozšířené latinky (Latin Extended).

Font face – Nalinkování vlastního webfontu do šablony

Vlastní písmo do webové šablony dostaneme pomocí @font-face deklarace v rámci CSS.

V rámci deklarace font-face nastavujeme:

• font-family – Název písma
• font-style – styl řezu písma (normal, italic, …)
• font-weight – řez písma (tzv. “tučnost”)
• font-display – pravidla pro vykreslování písma při načítání
• src – cesta k souborům s webfontem

V rámci optimalizace rychlosti načítání stránek je obzvláště důležité správně nastavit hodnotu font-display. Skvělý článek o řízeném vykreslování písma pomocí font-display napsal Martin Michálek, z kterého můžeme vyčíst doporučení, nastavovat ve většině případech hodnotu font-display: fallback.

Použití fontu z Google Fonts

Jednou z dalších možností, jak dostat do naší šablony font, je využít službu Google Fonts, což je jakási obrovská databáze s webovými fonty. Použití je velice snadné, stačí vybrat písmo, které se nám líbí, nastavit potřebné řezy a subset (i zde doporučuji vždy nastavit Latin Extended) a služba nám už vygeneruje potřebný kód, který vložíme do naší šablony.

Hlavní výhodou použití Google Fonts je jeho jednoduchost. Dále se fonty stahují z rychlých serverů / CDN Google a je zde šance, že stejný font se používá i na jiném webu, který uživatel navštívil před tím naším, takže ho bude mít zacachovaný – to znamená teoretické zrychlení načítání stránek, v praxi je však šance, že se to stane, poměrně malá. Nicméně použití CDN má samozřejmě i jiné výhody, nad kterými je dobré se zamyslet.

Nevýhodou je především závislost na službě třetích stran a v případě jejího výpadku to postihne i náš web.

Připojení fontu z Google Fonts se dá bez problémů využít například u jednoduchých, zástupných a dočasných stránek. U klasických „plnohodnotných“ webů doporučuji linkování vlastních font souborů.

Na výběr máme dva způsoby, jak font z Google Fonts k šabloně připojit:

1. Nalinkování samostatného CSS souboru v <head> naší šablony

Jedná se o doporučený způsob, jehož kód pak může vypadat nějak takto:

2. Import v rámci CSS souboru

Webfont můžeme také nalinkovat pomocí CSS deklarace @import v rámci našeho .css souboru se styly.

Chybějící diakritika znaků – subset Latin Extended

Pokud narazíte na problém, kdy se vám nechtějí ve vlastním písmu zobrazovat některé znaky, s největší pravděpodobností se bude jednat o problém s použitým rozsahem znaků (subsetem). Typicky jsou problémové například české znaky ě, š, Č apod. Abychom těmto problémům předešli, doporučuji u fontu volit právě již zmíněný subset Latin Extended.

Pokud tento subset nepoužijeme, budou se tyto znaky s diakritikou zobrazovat v zástupném fontu, což hned na první pohled nebude vypadat vůbec pěkně. Ukázka zobrazení diakritiky se špatným nastavením subsetu: