Použití Google Fonts

Stránky u nás si můžete všemožně upravovat, přičemž jedna ze základních úprav je i změna písma (dále jako font). Kromě barvy, velikosti a rozestupu písmen máte možnost měnit i font. Pokud vám nestačí základní nabídka, kterou Webgarden obsahuje, můžete využít knihovnu Google Fonts, kde naleznete stovky dalších fontů. V dnešním článku si ukážeme, jak přidáte Google Font na své stránky.
Na www.google.com/fonts si vyberete font, který se vám líbí. Při výběru si dejte pozor, aby font podporoval české diakritické znaky (ě, š, č, ř,...). Například můžete do pole Preview text vložit větu Žluťoučký kůň pěl krásné ódy a hned uvidíte, které fonty nemají s většinou českých písmen problém. Po vybrání fontu ještě důkladně vyzkoušejte, zda opravdu umí zobrazit všechny české znaky. Některé fonty jich umí hodně, ale třeba ř už nezobrazí. Neoficiální seznam fontů podporujících češtinu naleznete zde.
font_1.png
Pro rychlé použití fontu klikněte na prostřední ze tří tlačítek, která jsou umístěna nalevo od modrého Add to collection.
font_2.png
U výběru stylů (Choose the styles you want) zaškrtněte jen ty, které chcete používat. Čím více jich vyberete, tím pomaleji se bude vaše stránka načítat. Obvykle vám bude stačit Normal 400, Bold 700 a jejich kombinace s Italic (kurzíva). V druhém kroku výběru sady zvolte Latin Extended pro zahrnutí českých znaků.
font_3.png
Dále musíte na vaše stránky přidat kód, aby bylo možné font používat. U třetího kroku vyberte záložku @import a zkopírujte si zobrazený text.
font_4.png
V administraci Webgarden zvolíte VzhledEditace CSS. Existující text nemažte, pouze na první řádek přidejte zkopírovaný text, který začíná @import url. Nakonec změny uložte.
font_5_1.png
Dále je potřeba nahradit stávající font na webu fontem novým. Ve čtvrtém kroku tedy na stránce Google Fonts najděte název fontu, kterým budete nahrazovat ten původní. Font napište včetně uvozovek, jako je to na obrázku.
font_6.png
V administraci v Editoru CSS najdete sekci body a na řádku font-family uvidíte, jaký font je nyní používán. V tomto případě je to 'Ubuntu'. Teď už stačí najít v celém dokumentu všechny výskyty 'Ubuntu' a přepsat je na nový font (zde 'Play').
font_7_1.png
Tímto způsobem přidáte nový font.
font_8.png
Změny uložte a když nyní otevřete svoji stránku, uvidíte již nový font z knihovny od Googlu. Pokud budete mít s vložením nového fontu problém, rádi vám poradíme na naší podpoře.
24.11.2014 17:34:21
miracky
Name
Email
Comment
Or visit this link or this one