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.
    
    
• 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.