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í:
1/ Stažení a příprava fontu z fonts.google.com
- otevřete v internetovém prohlížeči stránku Google Fonts, kde jsou dostupné fonty pro webstránky: https://fonts.google.com/
- na levé straně panelu si v 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 a 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ů klikněte na nabídku "EMBED" kde se vytvoří kódy potřebné k vložení na stránku.
- zanechte si stránku fonts.google.com otevřenou a přejděte na bod 2 /
2 / Nahrání fontu přes ClickEshop administrátor
- vytvořte si na svém počítači 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; }
h1,h2,h3,h4,h5,h6{ font-family: 'Montserrat', sans-serif; }
nebo stažením připraveného souboru custom.css klikněte zde ...
Změníte si 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 důvěrnosti to specify these families:".
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 i druhý řádek kódu. - Soubor custom.css uložíte ve svém počítači.
- kód si vytvoříte z následujícího vzoru:
- na stránce fonts.google.com v nabídce "EMBED" si vyznačte a 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) neexistuje, vytvořte jej stisknutím z nabídky Vytvořit - složku a následně po vytvoření soubor do adresáře nahrajte.
- vložte ještě další následující kód v záložce - Hlavička stránky / do políčka Globální HTML programový kód
<link href="/storage/scripts/custom.css" rel="stylesheet" type="text/css" />
- před zavřením okna "Globální HTML kód" je třeba všechny změny uložit.