V jednom z předcházejících článků jsem se zabýval metodami vkládání a používání nestandardních písem na webových stránkách. Po několika málo měsících běhu nového rozhraní Google Font API a přidružené knihovny písem Google Font Directory bych rád popsal toto řešení.
Google Font API je rozhraní umožňující snadnou implementaci písem, zejména těch obsažených v knihovně Google Font Directory. Pro pokročilejší práci s písmem je k dispozici WebFont Loader. Celé řešení využívá standardu CSS, vlastnost @font-face a je takzvaně CSS3 a HTML5 kompatibilní. Po stránce technologií není novinkou, ale za nové lze považovat umožnění globálního přístupu k volně použitelným písmům a jednoduchou implementaci. Před technickým popisem vzorové implementace netradičně uvedu pro a proti použití tohoto řešení.
Fakta
- Služba je spuštěna teprve od 20. května 2010, což je velmi krátká doba. Uvidíme jak se v budoucnu vyvine.
- Na trhu existují již zavedené služby s dobrou podporu jako je TypeKit nebo FontDeck a další.
- Zajímavá výkonná Javascriptová knihovna WebFont Loader pro pokročilou práci s vlasností písma byla vyvinuta ve spolupráci se specialisty z TypeKit.
Klady
- Jednoduchost a rychlost řešení.
- Volná licence písem pro použití na webu. Není nutné podstupovat martyrium licencování zakoupených písem pro jednotlivé domény.
- Rychlý přístup k souborům ležících na rychlých CDN serverech Google a s tím spojené rychlejší zobrazení, cachování v prohlížeči a celkové zmenšení přenášených dat z hostingu webu.
- Minimalizace chyb způsobených překlepy a chybným linkováním variant souborů fontů.
Zápory
- Poměrně malý počet poskytovaných písem. Praktický žádný kvalitní script.
- Mnoho písem nepodporuje českou znakovou sadu. Písma použitelná pro český text: Cantarell, Droid Sans Mono, IM Fell, Inconsolata, Josefin Sans Std Light, OFL Sorts Mill Goudy TT a Reenie Beanie (závažná chyba kerningu u znaku ť).
- Písma nejsou technicky příliš kvalitní. Hlavním kamenem úrazu jsou nekorektně nastavené kerningové páry. V praxi a zejména při větších velkostech písma vznikají nevzhledné mezery mezi jednotlivými znaky (RU, VAC, ť, ď apod.).
- Na operačních systémech Windows s vypnutím vyhlazování písem (antialising) jsou písma velmi špatně čitelná.
- Nepodporuje SVG varianty písem, které jsou potřebné pro zobrazení na iPhone/iPad. Písma však lze stáhnout a soubory vygenerovat.
Implementace
Vlastní implementace spočívá v nahrání pásma na stránku a aplikaci písma pomocí CSS na zvolené elementy stránky.
Prvním krokem je vložení písma, kde máme k dispozici dvě varianty
-
Vložení písma „IM Fell DW Pica“ pomocí tagu v
v
-
Vložení písma „Inconsolata“ pomocí @import přímo v definici CSS:
@import url ('http://fonts.googleapis.com/css?family=Inconsolata');
Druhým krokem je nadefinování vloženého písma na elementy stránky
h1 {font-family: 'IM Fell DW Pica', arial, serif;}
p {font-family: 'Inconsolata', arial, serif;}
Zhodnocení
Tato mladá služba má, dle mého názoru, před sebou velkou budoucnost. Představuje rychlý a jednoduchý prostředek k zobrazení textů na webu jiným než „standardním“ písmem. Není zatížena změtí licenčních ustanovení a je zdarma.
Pokud Vás problematika kolem Google Font Api zaujala, podrobné informace naleznete například zde: http://paulirish.com/2010/details-on-the-new-google-webfont-api/ a http://paulirish.com/2009/fighting-the-font-face-fout/
