Jak vybrat a nastavit vlastní písmo



Určitě tuhle situaci poznáváte. Ať už proto, že s ní máte vlastní zkušenosti (v takovém případě tu mám dnes článek právě pro vás), a nebo proto, že je na českých a slovenských blozích zkrátka až moc často k vidění. Bloger(ka) se zamiluje to toho krásného ozdobného písma, co je v něm spousta kudrlinek a co vypadá, jako kdyby bylo psané perem namočeným do inkoustu, a umane si, že ho prostě musí mít na svém blogu...

Jenže ouha, to vysněné písmo neumí česky / slovensky, a tak se místo krásných a ozdobných nadpisů zobrazuje toto:

Příliš žluťoučký kůň úpěl ďábelské ódy.

A všechno kouzlo rázem je pryč. Ale to neznamená, že se těch krásných a originálních fontů musíte hned vzdávat. Právě naopak! Existuje spousta skvělých fontů, které nejenže podporují znaky s diakritikou, ale které si dokonce můžete jednoduše a zdarma nainstalovat na svůj blog.

Výběr písma

V tomto návodu budu stejně, jako při vytváření kterékoliv šablony, pracovat s databází Google Fonts, která nabízí velký výběr i snadnou instalaci. Nicméně ještě předtím, než se pustíme do samotného výběru, je třeba si ujasnit tři zásadní pravidla:

Ať umí česky / slovensky!

Opravdu si dejte pozor na to, aby písmo podporovalo znaky s diakritikou. Existuje jednoduchý způsob, jak si to ověřit, a to tak, že při samotném výběru vypíšete do okénka pro vlastní text všechna písmena s háčky a čárkami a kliknete na Apply to all fonts.

Pokud se vám u písma zobrazí všechna písmena, která jste vypsali, můžete fontům gratulovat, postupují do dalšího kola. A pokud ne... No, prostě jste si nebyli souzeni.

Méně je někdy více

A nebo jedním slovem: NEPŘEHÁNĚT. Snažte se na svém blogu nemít nikdy více než 2 nebo tři různé fonty najednou (např. jeden, kterým jsou psané všechny texty, a druhý, který je použit jenom na nadpisy), aby váš blog najednou nevypadal takto:



Schválně jsem pro demonstraci na jeden svůj zkušební blog (šablony Back to School zdarma ke stažení zde) nainstalovala sedm různých fontů. Jistě, každý z nich by sám o sobě možná působil dobře, ale dohromady mají na člověka přehlcující vliv, nemyslíte?

Čitelnost nadevše

Při výběru fontů byste také měli pamatovat na to, proč k vám na blog lidé vlastně chodí. Je to proto, aby obdivovali to ozdobné písmo, kterým jsou vaše texty psané, a nebo proto, aby četli vaše texty?

Pokud chcete mít ozdobné nadpisy, jen do toho, ale v samotném textů článků se držte jednoduchých písem jako jsou třeba Arial nebo Open Sans (který můžete vidět u mně na blogu)

Instalace fontů

Když už máte na Google Fonts vybrané fonty, které chcete na svém blogu použít, kliknete u každého z nich na malé červené plus a nebo na Select this font. (Pokud vybíráte více fontů, dejte si pozor, abyste je přidávali ve stejném okně.) Okamžitě se vám na spodu stránky objeví tmavě šedá lišta, kterou když si rozkliknete, uvidíte takovéhle okno:

Když kliknete na Customize, můžete si ještě nastavit, jaké varianty fontů chcete používat (obvykle vybíráte z normálního a tučného písma a kurzívy), ale potom už se přesuňte do části Embed a zkopírujte si kód v prvním označeném okénku.

V editoru HTML kódu vašeho blogu si nyní vyhledejte <b:skin> a váš kód z Google Fonts vložte přímo nad něj.


V tomto okamžiku se vám šablonu ještě nepodaří uložit. Aby se vám to povedlo, přidejte těsně před poslední špičatou závorku lomítko - kód vám bude končit takto: /> (jako na obrázku). A jestli se vám stále nedaří HTML kód uložit, zkontrolujte, zda se někde v kódu, který jste přidali, nenalézá znak & a v takovém případě za něj jednoduše připište amp;. (Bez tečky, samozřejmě.)

A tadá! Font máte na blogu nainstalovaný! Teď už zbývá písmo jen přiřadit nějakým prvkům na blogu...

K tomu využijete možnost přidat vlastní CSS v perzonalizaci šablony a druhý označený kód z okna v Google Fonts, který do okna pro CSS zkopírujete ve formátu:
h1 .title {
font-family: 'Open Sans', sans-serif;
}
Místo font-family: 'Open Sans', sans-serif; samozřejmě zkopírujete vlastní kód pro vaše vybrané fonty a na místo h1 .title doplníte název prvku, kterému chcete font přiřadit.

Například h1 .title znamená název blogu, .post-title názvy článků a .sidebar h2 názvy widgetů v postranním menu. Celé to ovšem platí pouze pro čistě Bloggerovské šablony. U šablon stažených z internetu je to o něco složitější a může chvíli trvat, než přijdete na to, jak se který prvek jmenuje. (Nejpřesněji to jde přes Prozkoumání přímo ve vašem prohlížeči...)
Jestli si s celou touhle věcí - se jmény HTML prvků, kterým chcete písmo přiřadit - nevíte rady, neváhejte mi napsat (např. na Facebookovou stránku) a já vám ráda pomůžu.
A to bude pro dnešní (docela vyčerpávající) návod vše. Doufám, že se vám líbil, budu se těšit na případné komentáře a jestli se rozhodnete vyzkoušet nainstalovat vlastní font na svůj blog, rozhodně mi nezapomeňte dát vědět, ať se můžu přijít podívat...

8 komentářů:

  1. Návod je moc hezký. Vše vysvětluje podrobně a i já, jakožto absolutní trouba co se týče html, jsem jej pochopila v pohodě. Věřím že pomůže mnohým blogerkám. :)

    Já osobně si většinou zvládnu vybrat z nabídky fontů, která je v základu. Tak nějak kudrlinky nemusím a když je jó chci, udělám je jako obrázky z odkazy přes photoshop. :)

    OdpovědětVymazat
    Odpovědi
    1. Keď si človek robí design sám, tak si môže vybrať zo základných fontov, blogger ich má vcelku dosť a veľa z nich podporuje českú/slovenskú diakritiku, to je fakt. Problém nastáva keď si dáš na blog šablónu stiahnutú z internetu, keďže tie majú zvyčajne fonty, ktoré nepodporujú náš jazyk. Ja som dokonca kvôli tomu ako taká ťapa prepisovala všetky nadpisy mojich článkov, aby som tam nemala slová s mäkčeňmi. Len nedávno som zistila ako zmeniť fonty v stiahnutej šablóne tak som sa tešila ako malé decko. Tiež som chcela vydať návod ako na to, ale tuto kolegynka ma predbehla, takže ho pravdepodobne vydám o pár dní neskôr... :-)

      Vymazat
    2. Díky moc za komentář! :) Obrázky s odkazy (dělané ve Photoshopu nebo kdekoli jinde) bych považovala za nejkrajnější řešení. Už jsem viděla celá menu (jak horní navigační lišty, tak postranní panely) dělaná tímto způsobem a jsem přesvědčená, že se to nevyplatí. Přijde mi, že takové množství obrázků zbytečně zpomaluje načítání stránek (což mohou pocítit zejména ti, kteří je navštěvují přes mobil) a riziko, že se obrázky vůbec nenačtou a čtenářům se takovýto odkaz vůbec nezobrazí, je příliš velké. CSS nabízí mnohem elegantnější řešení.

      Vymazat
  2. Srozumitelný a užitečný článek.

    OdpovědětVymazat
  3. Sice delší, ale za to šikovný článek! :)) sice jsem s fonty u sebe spokojená, ale co, jednou se to určitě hodit bude, takže si článek ukládám a opovaž se ho někdy smazat! :D
    A ještě se zeptám, dá se tam někam vecpat i nastavení velikosti? Mě totiž moje písmo přijde trošku veliký, když v editoru článku je nastavený na "normální" .. A zase když v editoru dám menší písmo, pak je hodně maličký a má mezi řádky dost velký mezery.
    Šablonu mám staženou, tak doufám, že se to tam dá někde v html třeba přepsat, jen nevím, kde přesně hledat. Kdybys mi poradila, byla bych ti nejvděčnějšííí! :))
    Michelle B :)

    OdpovědětVymazat
    Odpovědi
    1. Děkuji moc za komentář. :) Článek určitě mazat nebudu, na je na československých blozích stále příliš fontů, které nepodporují diakritiku...

      Osobně si myslím, že velikost písma na tvém blogu je ideální, ale jestli ti hodně vadí, dá se upravit přidáním tohoto CSS kódu:

      .entry-content {
      font-size: 16px;
      line-height: 24px;
      }


      Font-size upravuje velikost fontu a line-height velikost řádkování. Snad jsem ti pomohla. :)

      Vymazat
    2. Aaa díky moc, jsi zlatá!
      Chci ho zmenšit jen o ždibíček, nic závratnýho. Jen pro můj lepší pocit :D

      A máš pravdu. S těma fontama je to na pálku. Občas rozkliknu nějaký blog a nestačim se divit, že slečně nevadí, že se jí v nadpisu míchá její hezký, kudrlinkový font s klasickym rovnym Arielem nebo Timesem. Bije to do očí. Chápu, že né každej font podporuje českou diakritiku, ale dá se v pohodě najít i "kudrlinkový" písmo s naší diakritikou, tak proč tam plácat to "nefungující"..
      No doufejme, že někomu tvůj článek pomůže! :))

      Vymazat