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 h1 až h5.
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
info@inpage.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