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

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ů.
reklama

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.

Písma od Google nyní najdete na webu fonts.google.com. Mrkněte také na článek o základech typografie (anglicky).

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

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

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.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

návštěvník

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.

Přidat komentář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
Nové diskuze
reklama
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

Knihy o Drupalu

Kniha Drupal 8 Kniha Drupal 7 333 tipů a triků pro Drupal
Více na KnihyPolzer.cz

Co píší na Interval.cz
@maxiorel na Twitteru

Maxiorel na Twitteru