Vloženie nového fontu na stránku

 

Vložením nového fontu môžete na existujúcej šablóne zmeniť celkový vzhľad stránky a zladiť tak s osobnou alebo korporátnou identitou. Použiť môžete Google font či iný vlastný font.

 

A/ POUŽITIE GOOGLE FONTU

Postup pre vloženie a nastavenie fontu na web stránku alebo internetový obchod je nasledovný:

1/ Príprava Google fontu

  • otvorte si stránku fonts.google.com, kde sú dostupné rôzne fonty
  • na ľavej strane panela v sekcii "Languages" vyberte z ponuky "Latin Extended" 
  • kliknite na požadovaný font/fonty a v pravom hornom rohu daného fontu/fontov kliknete na ikonku "+"
  • následne sa zobrazí podfarbený panel s textom "Selected family"

    Príklad: Pri výbere fontu Monserrat vo verzii tenký, normálny a tučný font by bolo zobrazenie nasledovné:

    zmena fontu v clickeshop redakčnom systéme
  • zanechajte si stránku fonts.google.com otvorenú a prejdite na bod 2/

 

2/ Nahratie fontu cez ClickEshop administrátor

  • vytvorte si na svojom počítači textový súbor s názvom custom.css a vložte do vnútra súboru nasledovný kód:

body, button, input, textarea, select{ font-family: 'Montserrat', sans-serif; }
h1,h2,h3,h4,h5,h6{ font-family: 'Montserrat', sans-serif; }


alebo použite nami predpripravený súbor custom.css. Pre jeho stiahnutie kliknite tu ...

  • zmeňte hodnoty, ktoré nasledujú za font-family:
    Nové hodnoty skopírujete z už otvorenej stránky fonts.google.com (bod 1/) z časti "Family selected" a z položky "Use the following CSS rules to specify families"

    Príklad zobrazenia ilustratívneho vygenerovaného kódu pre font Montserrat je nasledovný:

    zmena fontu 3 v clickeshop redakčnom systéme

    Prvý riadok kódu určuje použitie vo všetkých častiach stránky vrátane tlačítok. V prípade, že je potrebné odlíšiť nadpisy iným typom fontu, na tento účel slúži druhý riadok kódu.

  • súbor custom.css uložíte vo svojom počítači

  • na stránke fonts.google.com v časti "Use on the web" zvoľte <link> a skopírujte vygenerovaný html kód začínajúci: <link href="https://fonts.googleapis.com/css?family=....."

    príklad kódu pre základný font: 

    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i" rel="stylesheet">



    príklad kódu pre základný font a font pre nadpisy:

    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i|Sansita:400,400i,700,700i" rel="stylesheet">



  • prihláste sa do ClickEshop administrátora a v menu [Správa obsahu] v ľavej nástrojovej lište kliknete tlačítko [Globálny HTML kód]
  • vložte skopírovaný kód v záložke - Hlavička stránky/ do políčka Globálny HTML programový kód
  • kliknutím tlačítka "Nahrať súbory na server" sa otvorí Centrálne úložisko súborov, ktoré umožňuje nahrávať súbory. Vytvorený súbor custom.css vložte do adresára "scripts". Ak tento adresár neexistuje, vytvorte ho stlačením z ponuky Vytvoriť - priečinok a následne po vytvorení súbor do adresára nahrajte.
  • vložte ešte ďalší nasledovný kód v záložke - Hlavička stránky/ do políčka Globálny HTML kód

    <link href="/storage/scripts/custom.css" rel="stylesheet" type="text/css" />

    pozn. Linky odporúčame uvádzať v relatívnom tvare, aby napr. pri zmene domény nedošlo k znefunkčneniu skriptu

  • pred zavretím okna "Globálny HTML kód" je potrebné všetky zmeny uložiť.
 

B/ POUŽITIE VLASTNÉHO FONTU

Postup pre vloženie a nastavenie vlastného fontu na web stránku alebo internetový obchod je nasledovný:

1/ Príprava fontu

  • pre webové použitie doporučujeme prekonvertovať font z formátu .ttf na formát .woff alebo .woff2  (na internete sú rôzne stránky, ktoré túto konverziu umožňujú)

 

2/ Nahratie fontu cez ClickEshop administrátor

  • postup je podobný ako pre vloženie Google fontu tzn. vytvoríte si .css súbor (podľa postupu vyššie), v ktorom názov fontu prepíšete názvom vlastného fontu
  • vytvorený súbor custom.css vložíte v centrálnom úložisku súborov do adresára "scripts". Ak tento adresár neexistuje, vytvorte ho stlačením z ponuky Vytvoriť - priečinok a následne po vytvorení adresára, súbor do adresára nahrajte.
  • do adresára scripts nahráte vlastný font vo formáte .woff resp. .woff2

  • do políčka Globálny HTML kód v záložke - Hlavička stránky vložte nasledovný kód:

<link href="/storage/scripts/custom.css" rel="stylesheet" type="text/css" />

 

  • zároveň je potrebné v Globálnom HTML kóde v záložke Hlavička stránky uviesť odkaz na vložený font. Správnu cestu doporučume skopírovať z administrácie tak, že:

    • v centrálnom úložisku súborov v adresári "scripts" kliknete pravým tlačítkom myši na .woff súbor s fontom
    • kliknete Info a z tabuľky skopírujete Cestu k súboru (je uvedená v relatívnom tvare)
  • pred zavretím okna "Globálny HTML kód" je potrebné všetky zmeny uložiť