Toto je návod pre nastavenie iného typu písma či fontu, než umožňuje Webnode. Budeme nastavovať písmo z Google Fonts, ale v zásade je možné vložiť font z akéhokoľvek iného online repository - napr. Adobe Fonts.

Prečo používať vlastné písmo na webe?

Pretože krabičákové riešenia a.k.a. šablóny vo výsledku spôsobia aj to, že sa weby na seba veeeeľmi podobajú. 

Navyše, ak máš brand, ktorý už nejakú dobu pestuješ aj mimo web a tvoji klienti sú naň zvyknutí, tak je veľmi divné, keď web vyzerá úplne inak ako tvoje vizitky, socky a ďalšie brandové veci.

Ako používať Google Fonts na Webnode

1. Vyber požadovaný typ písma v službe Google Fonts. 

Ja budem pracovať s fontom Sora.

2. Počas exportu vyber viac rezov písma, aby sa správne načítaval aj ako bold a kurzíva:

3. Potom klikni napravo na EMBED, následne @import a skopíruj všetko z prvého okienka.

4. Takto získaný kód vlož do hlavičky celého webu (Štandard, Profi, Business) alebo danej stránky (Mini, Limited).

Ak máš projekt vo verzii Mini, alebo Limited, kód budeš vkladať do SEO hlavičky každej jednej stránky zvlášť. V prípade projektu zadarmo priamo do stránky - ale zase - každej jednej zvlášť. Takže si radšej kúp vyšší balíček 😉

5. Tento kód skopíruj pod ten predošlý. Môžeš vynechať tagy style a skopírovať len tú prostrednú časť pred predošlý uzatvárací tag style:

<style>

* {

XXXXXXX!important;

}

</style>

6. Vráť sa na Google Fonts. Skopíruj kód z druhého okienka na Google Fonts a vlož ho namiesto XXXXXX.

U mňa to vyzerá takto:

<style>

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

* {

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

}

</style>

6. Zmeny ulož a publikuj. Hotovo. Ani nebolelo, že?

Pokročilé nastavenia a viac fontov

Kód nahradí súčasné fonty na webe tvojím fontom z Google Fonts. Týka sa to takmer všetkých textových elementov. Väššinou však platí, že sa kombinujú aspoň 2 fonty.

Ak by si chcel nastaviť viacero druhov písma pre rôzne elementy, napíš mi cez kontaktný formulár. Kód pre teba pripravím.

Ak si na to trúfaš sám, tu je malá nápoveda:

• V Google Fonts môžeš vybrať viac fontov naraz a tie potom vložiť do CSS kódu naraz.
• V CSS môžeš vytvoriť premenné pre jednotlivé fonty.
• Využi developerské nástroje a funkciu preskúmať, aby si našiel tie správne tagy a classy pre jednotlivé elementy.

Malý ťahák:

.t {
font-family: XXXXX !important; /*obyčajný text*/
}

.logo-text {
font-family: XXXXX!important;
}

h1, h2, h3 {
font-family: XXXXX !important; /*nadpisy - nadpis, podnadpis, titulok*/
}