Jak na vlastní písmo na webu s @font-face

Pokud navrhujete design nových webových stránek, měli byste se držet pro web obvyklých písem, jako je Verdana nebo Arial. V opačném případě je bude nutné řešit grafikou. Alespoň taková je stále platná základní poučka webdesignéra. Ovšem ke slovu pomalu přichází možnost použití libovolného písma na webu.

Pro zkušenější webdesignéry a CSS kodéry nebude tento článek asi ničím převratným, myslím si však, že spousta vás o možnosti použití vlastního písma na webové stránce neví. Nutnost pracovat jen s omezenou nabídkou standardních písem je totiž při návrhu webu docela svazující. Použití vlastních písem na webu je přitom docela snadné.

Důvod k tomu, že se doposud použití libovolného písma na webové stránce nerozšířilo, je nekompatibilita potřebné technologie se staršími webovými prohlížeči a v některých případech nutnost konverze souborů s fontem do jiného typu. Bez zajímavosti nejsou ani licenční problémy, ty však teď ponechejme stranou.

Jak na vlastní písmo na webu

Pouštíte-li se do kódování grafického návrhu a potřebujete nebo chcete implementovat netradiční font přímo do webové stránky, pak byste měli vědět, že tento požadavek je možné řešit pomocí zápisu @font-face, který je k dispozici od doby vzniku CSS2. Problém je v tom, že ne všechny prohlížeče podporují stejný typ souboru s písmem.

• Opera 10+, Safari 3.1+ a Chrome 4+ podporují formáty TTF, OTF a SVG
• Internet Explorer podporuje formát EOT

Z toho vyplývá, že je potřeba dvojího zápisu a konverze fontu tak, abyste jej mohli použít ve všech vyjmenovaných prohlížečích. Nejprve obecný zápis v CSS, který umožňuje použití vybraného fontu na webové stránce i v případě, že jej uživatel nemá v počítači:

{syntaxhighlighter brush:css}
@font-face {
font-family: VasePismo;
src: url(relativni-cesta/VasePismo.otf);
}
{/syntaxhighlighter}

Všimněte si, že nejprve je v zápisu definován název tohoto písma, následuje uvedení relativní cesty ke zdrojovému souboru s tímto písmem.

Budete-li chtít použít tuto techniku zároveň pro Internet Explorer s fontem ve formátu EOT, pak v hlavičce HTML kódu na místě, kde připojujete styly, uveďte něco podobného:

<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="ie-styles.css" />
<![endif]--> 

Jelikož se jedná díky značce <!-- o HTML poznámku, nebudou ji ostatní prohlížeče s výjimkou Internet Exploreru interpretovat. Ten však pozná, že se v poznámce požaduje načtení dalšího souboru se stylem. Do něj pak vložíte výše uvedený zápis @font-face s malou modifikací - odkážete v něm na soubor EOT.

Dále pak v CSS postupujete již klasicky. Nastavíte typ písma pomocí volání font-family, například takto pro odstavec:

{syntaxhighlighter brush:css}
p{
font-family: VasePismo, arial;
font-size: 12px;
}
{/syntaxhighlighter}

Kromě licenčních problémů nyní musíte vyřešit vytvoření souboru EOT. Častěji totiž budete mít k dispozici soubor s písmem jen jako TrueType, TTF. Stáhněte si proto malý nástroj, který potřebnou konverzi obstará - jmenuje se ttf2oet.

A to je vše. Nyní byste měli být schopni bez problémů používat vlastní font na webové stránce. Pokud vás problematika zajímá, doporučuji navštívit web www.font-face.com.