Webnode: Jak nastavit vlastní typ písma

02.03.2023

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.

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 kliknete na modré tlačítko ULOŽIT.
Pokud máte projekt ve verzi Free, 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 😉.

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

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

Celý tento kód pak zkopírujte do hlavičky HTML pod předchozí kód:

<style>
* {
font-family: "Sora", sans-serif !important;
}
</style>

Můj kód vypadá takhle:

<style>
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap');
* {
font-family: "Sora", sans-serif !important;
}
</style>

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

ℹ️ Důležité!

Kód nahradí všechny aktuální písma na webu vaším písmem. To se týká téměř všech textových prvků. Jenom nadpisy h1, h2 a/anebo h3 můžete změnit takhle:

<style>
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap');
h1, h2, h3 {
font-family: "Sora", sans-serif !important;
}
</style>

Pokud chcete nastavit více písem pro různé prvky, napište mi prostřednictvím kontaktního formuláře. Kód pro vás připravím.