Jak nahrát vlastní font na web
3 minuty
Typografie je klíčovým vizuálním prvkem webového designu. V solidpixels si můžete vybrat nejen ze široké nabídky písem díky integraci Google Fonts, ale můžete nahrát písmo vlastní nebo využít i Adobe Fonts.
Tato funkce je k dispozici pro naše ambasadory, kteří jsou součást Ambassadorského programu solidpixels. Nejlepší čas se připojit a získat řadu dalších výhod.
Přidání a editace dalších fontů
Pro přidání dalšího písma je potřeba otevřít Správce fontů. Ten je k dispozici v Designu u každé roletky s výběr písma, stačí kliknout na "Spravovat písma". Nebo jej rychle otevřete v aplikaci Spotlight pomocí klávesové zkratky ⌘+K na Mac (CTRL+K ve Windows) a následně napíšeme příkaz "Otevřít správce fontů".
Kliknutím na tento odkaz otevřete okno pro správu písem. Zde můžete upravit všechna již přidaná písma a také přidat nové kliknutím na tlačítko "Přidat písmo". V následujícím kroku si budete moci vybrat mezi vlastním hostovaným písmem, službou Google Fonts nebo Adobe Fonts.
Přidání vlastního písma
Pro nahrání vlastní písma můžete vybrat volbu "Hostované". Vyplňte název písma a nahrajte soubory s písmem z vašeho počítače. Soubory musí být ve formátu WOFF nebo WOFF2. Jednotlivé varianty je třeba nahrát jednotlivě (např. pro variantu Regular a Bold).
Chcete-li použít hostované písmo, je také důležité mít platnou webovou licenci pro použití daného písma na webu.
Přidání písma z Google Fonts
Při volbě Google Fonts máte možnost vybrat libovolné písmo z jejich nabídky. Dbejte při výběru ale důrazit na podporu správaných jazyků (např. čestiny). Je nezbytné také vybrat záložní písmo, které se zobrazí v případě, že z nějaké důvodu výchozí písmo nelze načíst.
Tip: Jak správně kombinovat různé styly písma?
Přečtěte si článek 12 trendy kombinací Google fontů, díky kterým vaše webové stránky vystoupí z davu.
Přidání písma z Adobe Fonts
Pro využití písma od Adobe Fonts je potřeba mít vlastní aktivní účet na webu fonts.adobe.com. Ze založené projektu v jejich rozhraní překopírujete Project ID, Název písma a CSS hodnotu. Můžete přidat i více variant písma (např. Regular, Bold), které chcete na webu používat, a zástupné písmo, které se zobrazí v případě, že by byl vámi vybraný font nedostupný.
Všechna nově přidaná písma se automaticky zobrazí při výběru písma v nastavení Designu jednotlivých prvků (nadpisy, obecný text, tlačítka apod.)