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ý:
- prihlásite sa na stránku Google Fonts kde sú dostupné fonty pre webstránky: https://fonts.google.com/
- na ľavej strane panela si 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.
- vytvorte si 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; } a to tak že zmeníte 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: ". Súbor custom.css uložíte vo svojom počítači.
Vzor kódu v custom css:
body, button, input, textarea, select{ font-family: 'Montserrat', sans-serif; }
h1,h2,h3,h4,h5,h6{ font-family: 'Sansita', sans-serif; }
/Vysvetlivky: 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ť druhý riadok kódu/ - na tej istej stránke v ponuke "EMBED" si vyznačte 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) tam nieje, tak ho vytvorte stlačením ponuky Vytvoriť - priečinok a následne po vytvorení súbor do adresára vložte.
- pred zavretím okna "Globálny HTML kód" je potrebné všetky zmeny uložiť.