Webnode: Jak nastavit vlastní typ písma

Toto je návod pro nastavení jiného typu písma nebo fontu, než umožňuje Webnode. Konkrétně budeme nastavovat písmo z Google Fonts.

Obdobně by měli fungovat i Adobe Fonts nebo další cloudová uložiště.

Proč používat vlastní písma na webu?

Protože výsledkem krabicových řešení a šablon jsou také webové stránky, které si jsou navzájem velmi podobné.
Navíc, pokud máte značku, kterou jste nějakou dobu pěstovali mimo web a vaši klienti jsou na ni zvyklí, je velmi zvláštní, když web vypadá úplně jinak než vaše vizitky, ponožky a další značkové věci.

Jak vložit na Webnode písmo z Google fonts

1. Vyberte požadované písmo v nabídce Google Fonts. Budu pracovat s písmem Sora.

2. Při exportu vyberte více řezů písma, aby se správně načetlo jako tučné i kurzíva:

3. Pak klikněte vpravo na tlačítko EMBED, pak na @import a zkopírujte vše z prvního okna.

4. Tento kód vložte do HTML hlavičky celého webu/stránky - záleží na balíčku. 

• V případě Standard, Profi a Business klikněte na NASTAVENÍ > NASTAVENÍ WEBU > HTML hlavička všech stránek. Pak klikněte na modré tlačítko ULOŽIT.
• Pokud máte projekt ve verzi Mini nebo Limited, vložíte kód do záhlaví SEO každé jednotlivé stránky zvlášť. Proto si raději kupte vyšší balíček 😉.
• Free projekty vlastní kódy vkládat do SEO nastavení nemůžou.
  

5. Nyní můžete kód zkopírovat z druhého políčka na Google Fonts.

Nebo přepište název písma v níže uvedeném kódu (místo SORA zadejte název vašeho písma).

Zkopírovaný kód pak zkopírujte do hlavičky HTML pod ten předchozí kód.

<style>

* {

sem zkopíruj druhé políčko z Google fonts

}

</style>

Můj kód vypadá takto:

<style>

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap');

* {

font-family: "Sora", sans-serif !important;

}

</style>

Vidíte, že jsem oba kódy zkombinovala do jednoho, aby se zbytečně neopakovaly tagy <style>.

6. Uložte a zveřejněte změny.

Hotovo 🎉