Domů » Články » Programování

Google Font Directory a nová písma pro vaše weby

21. 7. 2010, Jan Polzer

Google spustil službu, jejímž úkolem je nabídnout online prohlížeč nejrůznějších písem a zároveň poskytnout jednoduchou možnost, jak si tato písma kdokoli doplní do svých webových stránek. Zapomeňte tedy na složité vyhledávání fontů.

Nedávno jsem v článku Jak na vlastní písmo na webu s @font-face popisoval návod, jak si do webových stránek zabudovat prakticky jakékoli písmo a oprostit se od zažitého nudného standardu s Arialem, Tahomou a Verdanou. Možnost, kterou nabízí Google Font Directory je velmi podobná.

Google Font Directory vám však usnadní přemýšlení nad tím, jak správně zapsat potřebný zápis a vložení fontu do CSS, stejně tak můžete z hlavy vypustit starosti, jak soubor s písmem převést do potřebného formátu. Navíc máte k dispozici online prohlížeč fontů, ve kterém si potřebné písmo prohlédnete ve všech jeho podobách předtím, než jej na webu použijete.

Google Font Directory jako prohlížeč písem

Na webové stránce code.google.com/webfonts najdete v betaverzi běžet službu Google Font Directory. Na titulní straně uvidíte seznam různých fontů, který by měl zřejmě časem rozšiřovat. Písmo, které se vám líbí, si rozklepněte. Tím si zobrazíte detailní informace o zvoleném fontu. Uvidíte jeho náhled v různých velikostech, přepínači v podobě záložek si zobrazíte i varianty písma (tučné, kurzíva, normální...), kompletní seznam podporovaných znaků a něco málo o historii vybraného fontu.

Google Font Directory

Otestujte si diakritiku v praxi

Klepněte na odkaz Preview this font. Dostanete se do jednoduchého editoru, ve kterém lze vyzkoušet vybrané písmo na vašich vlastních textech. Z nabídky si navíc můžete rychle vybrat jiné písmo, táhlem upravit jeho velikost, převést na velké znaky, upravit rozestupy atd. Hned pod editorem je navíc zvýrazněno, jak písmo zabudovat do vaší vlastní webové stránky.

Google Font Directory

Zabudování písma do webu

Jak naznačuje nápověda pod editorem, vybrané písmo vložíte do svých webových stránek tak, že do hlavičky HTML stránky (mezi značky <head></head>) vložíte značku <link> ve tvaru poskytnutém na stránce Google Font Directory. Poté můžete v CSS nastavit použití vybraného písma pro určitý element na stránce pomocí klasického zápisu font-family: Název písma.

Výše uvedený způsob, který je popsán také pod editorem na Google Font Directory, však není příliš vhodný k tomu, abyste jej zkombinovali s vlastním CSS souborem. Jestliže chcete soubor s písmem importovat rovnou do vlastního CSS, použijte zápis v takovémto tvaru, který umístíte na úplný začátek svého CSS:

@import url(http://fonts.googleapis.com/css?family=Cantarell);

Osobně bych spíše doporučil nechat si kód pro vložení vygenerovat na stránce s prohlížením písma, kde se přepnete do sekce Get the code, zatrhnete si, zda chcete použít běžné písmo, tučné písmo, kurzívu nebo nějakou další variantu, a buď zkopírujete vygenerovanou značku <link> do svého HTML souboru, nebo si rozklepnete odkaz Advanced techniques a využijete vygenerovaný zápis s @import pro vložení do vašeho vlastního CSS.

Deset online nástrojů pro každého webmasteraElektronický podpis: jak jej získat?

Líbí se vám článek? Dejte mu hlas:
Přidej odkaz na Bookmarky.cz

Re: Google Font Directory a nová písma pro vaše weby

Napsal uživatel dotu (bez ověření) dne 28. Červenec 2010 - 17:47.

Většina, ne-li všechny - nezkoušel jsem, uvedené fonty nezobrazují dobře naše oblíbená nabodeníčka. Ostatně to ukayuje i uvedená ukázka. Takže pro weby v češtině nevhodné... Bohužel.

Volby prohlížení komentářů

Vyberte si, jak chcete zobrazovat komentáře a klikněte na „Uložit změny“.