TypeKit na codefritters.com

Možná jste si všimli, že web www.codefritters.com změnil trochu vzhled - používá písma, která nejsou běžně v prohlížečích vidět a rozhodně nejsou instalovaná na vašich počítačích.

Technologií pro implementaci uživatelských písem do webových stránek je celá řada, např. sIFR, TypeKit, WOFF, @font-face a další. Zatímco sIFR vyžaduje Flash, což je věřím mrtvá technologie, TypeKit vypadá velmi slibně. 

Jak to funguje?

Do kódu stránky se vloží odkaz na javascript, který přepíše css nebo html tagy svým nastavením, které obsahuje odkazy na vybraná písma. Pojďme projít celý postup krok za krokem.

1. Vytvoření účtu na typekit.com

Na adrese https://typekit.com/plans si vyberte balíček, který vám vyhovuje. Já jsem začal s Trial a myslím, že naprosté většině lidí bude vyhovovat. Vyplňte tedy požadované údaje a klikněte na Register.

2. Výběr písem

Teď musíte vybrat písma, která se nejlépe hodí pro váš web. Bohužel, většina písem v nabídce neobsahuje českou lokalizaci, takže vám k ničemu nebudou. Napište tedy do vyhledávacího pole v pravém horním rohu slovo "Pro". Tím vyhledáte písma, která určitě CE znaky obsahují - není jich sice moc, ale všechno je lepší než Arial, Verdana a Times :)

3. Potvrďte výběr písma

Pokud jste si tedy vybrali, tak klikněte na + Add To Kit. Objeví se nové okno, které se jmenuje TypeKit Editor. V levém horním rohu je položka "Selectors". Zde se zadávají HTML tagy nebo CSS selektory, které budete chtít přepsat novým písmem. Jak zjistíte, který selektor nebo tag to je?

4. Zobrazte si v prohlížeči svou webovou stránku

Pokud používáte Safari, tak máte k ruce nádherný nástroj, který vám jednoduše ukáže, co potřebujete vědět. Vyberte například nadpis na vaší stránce. Klikněte pravým tlačítkem myši a vyberte Inspect Element. Pokud máte v Inspektoru vybranou záložku "Elements", tak máte v pravé časti inspektoru "Style attribute" a v něm je "Inherited from". V mém případě je "Inherited from h1". h1 je HTML tag. který hledáte. Stejně funguje i CSS tag, například class

5. Zadejte tag do TypeKit Editoru

Zadejte požadovaný tag a klikněte na Add. Pro uložení změn musíte kliknout na tlačítko Publish.

6. Implementace kódu

Nyní klikněte v horní liště TypeKit Editoru na položku Embed code. Zkopírujte obě řádky:

<script type="text/javascript" src="http://use.typekit.com/nir8oqp.js"></script>

<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

a vložte je do webové stránky před tag </head>

7. A je to.

Dotazy? Komentáře? Chtěli byste aplikaci pro iPhone? Kontaktujte mne!