Vloženie nového fontu na stránku
Pri navrhovaní a zmene dizajnu vznikne požiadavka vložiť nový font, ktorý daná stránka neobsahuje. Takto sa môže na existujúcej šablóne zmeniť celkový vzhľad stránky, čím sa môže stránka tematicky zladiť s osobnou alebo firemnou prezentáciou na stránke.
Postup pre vloženie a nastavenie fontu na web stránku alebo internetový obchod je nasledovný:
1/ Stiahnutie a príprava fontu z fonts.google.com
- otvorte v internetovom prehliadači stránku Google Fonts, kde sú dostupné fonty pre webstránky: https://fonts.google.com/
- na ľavej strane panela si v sekcii "Languages" vyberiete z ponuky "Latin Extended"
- z ponúkaných fontov si vyberte taký, ktorý potrebujete a to tak, že v pravom hornom rohu daného fontu kliknete na tlačítko "+"
- na spodnej strane stránky sa zobrazí podfarbený panel s textom "Family selected"
- kliknete na tento spodný panel a ukáže sa Vám okno kde si vyberiete ponuku "CUSTOMIZE" s výberom rezov písma kde si vyberiete napríklad dva páry rezov písma ako napríklad "regular + regular Italic" a druhý pár "bold + bold Italic"
- po výbere rezov kliknite na ponuku "EMBED" kde sa vytvoria kódy potrebné na vloženie na stránku.
- 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 kód, ktorý pripravíte podľa nasledovného postupu:
- kód si vytvoríte z nasledovného vzoru:
body, button, input, textarea, select{ font-family: 'Montserrat', sans-serif; }
h1,h2,h3,h4,h5,h6{ font-family: 'Montserrat', sans-serif; }
alebo stiahnutím pripraveného súboru custom.css kliknite tu ...
Zmeníte si hodnoty, ktoré nasledujú za "font-family:". Tieto hodnoty si vyberiete z ponuky Google Fonts, spodný panel "Family selected" a ponuky "EMBED" a z položky "Use the following CSS rules to specify these families: ".
Prvý riadok kódu určuje použitie vo všetkých častiach stránky. V prípade, že je potrebné odlíšiť nadpisy iným typom fontu, v takom prípade je potrebné použiť a vložiť aj druhý riadok kódu. - Súbor custom.css uložíte vo svojom počítači.
- kód si vytvoríte z nasledovného vzoru:
- na stránke fonts.google.com v ponuke "EMBED" si vyznačte a skopírujte do schránky (clipboard) 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], pričom sa otvorí nové okno
- 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 (priečinok) 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 programový kód
<link href="/storage/scripts/custom.css" rel="stylesheet" type="text/css" />
- pred zavretím okna "Globálny HTML kód" je potrebné všetky zmeny uložiť.