0 Kč s DPH

Změna písma na webu

Vytvořeno: 5. 3. 2014, aktualizováno: 9. 11. 2017

Určitě jste přemýšleli o změně typu písma na webu, ale báli jste se, že jej neuvidí i ostatní uživatelé, protože ne všechny fonty, které máte v počítači, mají i jiní uživatelé. Dnes si ukážeme použití online bezplatných fontů.

Google Fonts

Google Fonts (dříve nazývaný Google Web Fonts) je interaktivní adresář pro webové fonty, který byl spuštěn v roce 2010 a vylepšen v roce 2011. Mnoho fontů je pod licencí SIL Open Font 1.1 a jiné pod licencí Apache, což znamená, že obojí jsou bezplatné softwarové licence, tudíž zdarma k použití.

Jistě je vhodné zmínit, že by měl být na webu použitý jen jeden, maximálně dva typy písma. Jeden pro nadpis a druhý pro obyčejný text.

Výběr písma

Na stránkách Google Fonts vidíme v pravém sloupci filtr pro nastavení požadovaných vlastností písma a v levém vidíme konkrétní písmo.

Typ písma

V sekci Categories vybereme typ písma:

  • Serif - jsou patková písma
  • Sans-serif - jsou bezpatková písma
  • Display - jsou písma používaná např. pro novinové titulky. Písmo má těsnější rozestupy, jemnější detaily a patky, mírně zkrácené tvary a větší rozdíly mezi tlustými a tenkými tahy
  • Handwriting - jsou ručně psaná písma
  • Monospace - je proporciální písmo, tzn. že každý jednotlivý znak zabírá stejné místo. Ať už se jedná o písmeno i nebo a.

Vlastnost písma

Poté si můžeme zvolit počet stylů (number of styles), tloušťku (thickness), sklon (slant) a šířku (width) písma na posuvníku.

Sada znaků

Dalším krokem je výběr sady znaků. Pro správné zobrazení českých znaků vždy vybírejte sadu Latin Extended. Pouhé ponechání sady Latin by znamenalo špatné zobrazení písma, protože některé české znaky nepodporuje.

Použití písma na webu

V levém sloupci vybereme písmo a klikneme na ikonku + (Select this font). Otevře se nám dole sloupec, ve kterém vybereme styly písma a aplikujeme písmo na náš web.

Styl písma

V sekci Customize vidíme různé styly písma, které můžeme použít. Vybírejte pouze ty, co potřebujete. Více stylů zpomaluje načítání stránek, což nám ukazuje zelený ovál vpravo nahoře.

Znaková sada

Námi vybraná znaková sada (nezapomeňte, že pro české znaky je důležité mít Latin Extended)

Kód pro přidání písma

Vybereme sekci Embed a v ní záložku @import, zkopírujeme uvedený kód a vložíme jej na začátek vlastního stylu (vzhled > vlastní styly CSS) v administraci inpage.

Úprava písma

Přidání fontu pro námi požadovaný prvek.

Změnu písma pro celý web provedeme zápisem níže do vlastního stylu. Chceme-li změnit pouze nadpisy, napíšeme místo body znak h1h5.

body {
font-family: 'Roboto Condensed', sans-serif;
}

Šablona Hanami: Při použití této šablony, je třeba vypsat všechny znaky, kde si přejete písmo změnit (např. h1, h2, h3, h4, p ...). Pouze znak "body" nestačí.  

Změny uložte a v náhledu webu již vidíte Vámi zvolené písmo.

Tým inPage
inpage(zav)zoner.cz

Přidat komentář

Přehled komentářů

  • nemohu otevřít stránky inpage

    9.8.2015 14:04:07 | Václav Musich

    Po havarii mého PC se nemohu připojit na stránky inpage na mé adrese www:stpjablonec.eu.,taže nemohu upravovat webové stráky,doplňovat zprávy,vytvářet fotogalerie a po.Jak se mohu přihlásit k editaci webových stránek.Poradíte mě?

    Odpovědět

  • Změna typu písma

    5.11.2017 12:24:38 | Milan Köhler

    Dobrý den,
    nefunguje mi změna fontu písma pro celý web www.czecom.cz. Postupoval jsem dle všech vašich návodů, ale ani bezpečné fonty nefungují. Ve vlastním CSS Stylu mám zápis: body { font-family: Tahoma, Geneva, sans-serif; } . Prosím o radu, kde mám chybu.
    Děkuji

    Odpovědět | Zobrazit odpovědi

    • Re: Změna typu písma

      9.11.2017 15:58:50 | Tým inPage

      Dobrý den, děkujeme za komentář, který se stal podnětem k aktualizaci tohoto článku. V něm jsme doplnili, že u šablony Hanami, kterou máte zvolenou, je potřeba vypisovat jednotlivé prvky, kde chcete písmo změnit (h1, h2, h3, h4, p...), pouze "body" nestačí.

      Odpovědět

  • písmo

    9.12.2017 8:15:53 | Jana

    Dobrý den,

    též se na mé stránce změna fontu neprojevuje.

    zápis:

    @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700&subset=latin-ext');

    font-family: 'Roboto Condensed', sans-serif;

    body {
    font-family: 'Roboto Condensed', sans-serif;
    }

    Odpovědět | Zobrazit odpovědi

    • Re: písmo

      11.12.2017 13:22:57 | Tým inPage

      Dobrý den,
      prosím napište adresu Vaší domény. Ať se podíváme, kde může být problém.

      Odpovědět

inPage - webové stránky, doménawebhosting snadno.