Vložení nového fontu na stránku


Při navrhování a změně designu vznikne požadavek vložit nový font, který daná stránka neobsahuje. Takto lze na existující šabloně změnit celkový vzhled stránky, čímž se může stránka tematicky sladit s osobní nebo firemní prezentací na stránce.

 

Postup pro vložení a nastavení fontu na web stránku nebo internetový obchod je následující:

  • přihlásíte se na stránku Google Fonts kde jsou dostupné fonty pro webstránky: https://fonts.google.com/
  • na levé straně panelu si sekci "Languages" vyberete z nabídky "Latin Extended"
  • z nabízených fontů si vyberte takový, který potřebujete a to tak, že v pravém horním rohu daného fontu kliknete na tlačítko "+"
  • na spodní straně stránky se zobrazí podbarvený panel s textem "Family selected"
  • kliknete na tento spodní panel a ukáže se Vám okno kde si vyberete nabídku "CUSTOMIZE" s výběrem řezů písma kde si vyberete například dva páry řezů písma jako například "regular + regular Italic" a druhý pár "bold + bold Italic"
  • po výběru řezů klepněte na nabídku "EMBED" kde se vytvoří kódy potřebné k vložení na stránku.
  • vytvořte si textový soubor s názvem custom.css a vložíte do nitra souboru kód který připravíte podle následujícího postupu:
  • kód si vytvoříte z následujícího vzoru: body, button, input, textarea, select{ font-family: 'Montserrat', sans-serif; } a to tak že změníte hodnoty které následují za "font-family:". Tyto hodnoty si vyberete z nabídky Google Fonts spodní panel "Family selected" a nabídky "EMBED" a z položky "Use the following CSS rules to specify these families: ". Soubor custom.css uložíte ve svém 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; }
    /Vysvětlivky: První řádek kódu určuje použití ve všech částech stránky. V případě že je třeba odlišit nadpisy jiným typem fontu, v takovém případě je třeba použít a vložit druhý řádek kódu/
  • na téže stránce v nabídce "EMBED" si vyznačte zkopírujte do schránky (clipboard) vygenerovaný html kód začínající: <link href="https://fonts.googleapis.com/css?family=....."
  • příklad kódu pro základní písmo: <link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i" rel="stylesheet">
  • příklad kódu pro základní font a font pro nadpisy: <link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i|Sansita:400,400i,700,700i" rel="stylesheet">
  • přihlaste se do ClickEshop administrátora a v menu [Administrace obsahu] v levé nástrojové liště kliknete tlačítko [Globální HTML kód], přičemž se otevře nové okno
  • vložte zkopírovaný kód v záložce - Hlavička stránky / do políčka Globální HTML programový kód
  • kliknutím tlačítka "Nahrát soubory na server" se otevře Centrální úložiště souborů, které umožňuje nahrávat soubory. Vytvořený soubor custom.css vložte do adresáře "scripts". Pokud tento adresář (složka) tam není, tak ho vytvořte stisknutím nabídky Vytvořit - složku a následně po vytvoření soubor do adresáře vložte.
  • před zavřením okna "Globální HTML kód" je třeba všechny změny uložit.