Máte svůj pěkný font, který byste chtěli použít na webu? Tady je postup, jak to udělat „správně“.

Výchozí formát písma

Nejprve potřebujete připravit písmo ve správném formátu, tedy TTF (TrueType) nebo OTF (OpenType). Navíc musí být toto písmo označené jako „instalovatelné“ (neboli „volně šiřitelné“).

Upozornění: Písma, která jsou předinstalována ve Windows, MacOS nebo se instalují s Adobe produkty (Photoshop apod.), jsou většinou licencovány pouze pro použití na počítači, na kterém byly nainstalovány a proto je nelze (legálně) použít na webu!

Pokud nemáte vhodný formát nebo si nejste jisti nastavením šiřitelnost (teď mluvím čistě o technické hodnotě ignorujíc právní důsledky!), použije nástroj FontForge. Stáhněte, nainstalujte a spusťte. Program má své mouchy a tak bude nejlépe, když své písmo umístíte do složky „c:\“ a přejmenujete ho na něco jednoduchého (např. „pismo.ttf“).

Ve FontForge zvolte z menu Element položku Font Info. V dialogu jděte do OS/2 a najděte položku Embeddable. Zde musí být nastaveni „Installable font“ (příp. „Embeddable„). V dialogu můžete změnit i další hodnoty, jako například jméno písma. Nakonec uložte změny tlačítkem OK.

Z menu File zvolte Generate fonts… a v seznamu pod jménem souboru zvolte typ „TrueType“ (TTF) nebo „OpenType“ (OTF).

Získání ostatních formátů

Teď musíte z vytvořeného písma získat další formáty, které jsou potřeba pro různé prohlížeče (TTF/OTF pokryje 90% moderních prohlížečů, ale vždy je lepší mít 99% než jen 90%). Použijte tedy webový nástroj WebFont generator a kliknutím na Add font své písmo nahrajte. Písmo se zkonvertuje a připraví ke stažení. Můžete přidat i více písem a nechat si z nich vytvořit celý balík.

Než ale písmo stáhnete, proveďte ještě pár úprav. Nejprve zvolte Expert optimalizaci a zaškrtněte formáty TrueType/OpenType, WOFF, SVG a EOT Compressed. Pod Subsetting zvolte „No subsetting“ (ve výchozím nastavení web extrahuje pouze znaky anglické abecedy!!!). Další z možností je použít X-height matching a zvolit jedno ze standardních písem, které pak bude použito v případě, že prohlížeč neumí písmo vložit (a pokryjete tak 99.99% CSS-kompatibilních prohlížečů).

Nakonec zaškrtněte „Yes“ pod Agreement a klikněte na Download your kit. Stažený ZIP rozbalte do složky svého webu (např. /fonts/). Spusťte svůj oblíbený editor a do hlavičky stránky přidejte:

<link
    type="text/css"
    rel="stylesheet"
    href="fonts/stylesheet.css"
>

Adresa „fonts/stylesheet.css“ je cesta k CSS přiloženého v ZIPu.

Teď již můžete používat v CSS své písmo:

body { font-face: 'moje-pismo'; }

Jméno, pod kterým lze písmo použít, najdete v souboru stylesheet.css stejně jako detaily o tom, jak se písmo načítá pomocí CSS.

Ruční správa fontů

Pokud raději spravujete věci ručně, více než WebFontGenerator se vám bude hodit stránka EverythingFonts, kde můžete konvertovat jednotlivé formáty a generovat font-face definice. Nicméně stránka pouze poskytuje nástroje a nechává vše na vás.

Pod Font Conversion najdete jednotlivé převodníky písem. Stačí zvolit výchozí soubor s písmem a kliknutím na Convert to * stáhnout zkonvertovaný soubor.

Pod Font Tools pod položkou @font-face najdete generátor CSS.

Pořadí vkládání písem

1. Jako první vždy vkládejte EOT pro Internet Explorer, protože ten dokáže najít pouze první písmo.
2. Následně vložte WOFF formát, který je podporován většinou moderních prohlížečů a díky svému formátu je nejmenší a tudíž se nejrychleji stáhne.
3. Následně uveďte TrueType formáty (TTF nebo OTF), které jsou podporovány staršímy prohlížeči.
4. Nakonec dejte SVG, které je potřeba pro staré iPhony, a kvůli svému formátu je několikanásobně větší a stahuje se extrémně pomalu.

Omezení pro určité znaky

Pokud chcete písmo použít pouze pro určité znaky (příklad uvádí písmo a rozsahy pro UNICODE smajlíky), můžete omezit definici font-face hodnotou unicode-range:

@font-face {
    font-family: "EmojiSymbols";
    url("http://emojisymbols.com/font/EmojiSymbol-Regular.woff") format("woff")

    unicode-range: U+1F???;
    /* any character in range 1F000 - 1FFFF
         (symbols are 1F300 - 1F6FF) */
    unicode-range: U+2600-26FF;
    /* characters in this range */
}

Každá definice font-face může obsahovat více rozsahů (uvedením více unicode-range hodnot), ale je potřeba si uvědomit, že ne všechny prohlížeče podporují tuto definici a tak je potřeba dobře otestovat, kde tuto definici použít a jak ji obejít pro ostatní prohlížeče (např. WebFont generator umí tzv. subsetting, což je vymazání nežádoucích znaků u písma).