MENU

Font-family – css vlastnost určující font písma

Font písma je grafické zobrazení písmen, číslic a ostatních znaků. Zdaleka ne každý font má i české znaky, na to je třeba myslet. U použitých fontů je třeba dávat si pozor i na licenční práva k fontům.

Existuje v CSS 1, 2 a 3 | je dědičná

Způsob zápisu

Ukázka zápisu rodiny fontu "Times New Roman", pokud by nebyl, tak "Times", pokud by ani ten nebyl, tak jakýkoli dostupný patkový font.

h1, p, td, li {
   font-family: "Times New Roman", Times, serif;
}

Napsat font v CSS sice můžete, ale pokud se nebude nacházet v počítači návštěvníka, tak se nepoužije. Se základními fonty, jako je třeba Times New Roman, Arial, Calibri, Verdana…, většinou problém nebude, protože bývají v drtivě většině počítačů. U jiných fontů to ale platit nemusí. Google ale tento problém do značné míry řeší pomocí Google fonts na stránce:

https://fonts.google.com/

Všechny zde umístěné fonty je možné na webových stránkách použít zdarma. Postup je následující:

  1. Vyberete si jeden, případně více fontů. Volbu provedete tak, že kliknete na značku +. Při volbě si dávejte pozor na to, zda font umí češtinu. V sekci [Language] si zvolte [Latin Extended], čímž vyfiltrujete jen fonty podporující diakritiku. I přesto se přesvědčte, zda zvolený font umí všechny české znaky. Přesvědčíte se tím, že kliknete do textu fontu a začnete psát „ěščřžýáíéúů“. Dalším užitečným filtrem při výběru vhodného fontu jsou tlačítka v sekci [Categories].
    Pozor !!! Nezapomínejte, že velké množství použitých fontů o značně datové velikosti zpomalí váš web! Zpomalení nemusí být nijak dramatické, ale v kombinaci s dalšími prohřešky se může web stát nepoužitelný. Proto volte fonty s rozmyslem.
    Google fonts 01
  2. Každou volbou fontu si své zvolené fonty ukládáte do paměti, kterou naleznete při spodním okraji okna internetového prohlížeče. Kliknutím na [Families Selected] se vám zespodu vyroluje okno s instrukcemi, jak fonty použít na vašem webu.
    Google fonts 02
  3. Před použitím zvolených fontů nezapomínejte provést ještě jejich nastavení. To že font má i české znaky a různé varianty fontu ještě neznamená, že si je načte do počítače návštěvníka. Musíte si to navolit v záložce [CUSTOMIZE]
    Google fonts 03   Google fonts 04
  4. Font můžete do stránek nahrát pomocí vložení patřičného kódu mezi HTML značky <head> a </head>. Vložený kód může vypadat takto:
     <link href="https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed|Roboto&amp;subset=latin-ext" rel="stylesheet">
    Druhou možností je vložení do samostatného CSS souboru přes @import. To může vypadat takto:
     @import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed|Roboto&subset=latin-ext');
  5. Pokud kód webu odkazuje na font ke stažení, pak jej už můžete přiřazovat k jednotlivým elementům HTML kódu. Název fontu naleznete v části [Specify in CSS].   

Kam dál

Kurz základy HTML a CSS | Kurz tvorby webových stránek pomocí systému Joomla | Seznam CSS vlastností

Potřebujete pomoci? Žádný problém!

Nevíte si s něčím rady a potřebujete rychlou pomoc odborníka? Můžete se obrátit na nás a my vám dokážeme pomoci i přes internet.

Více o on-line pomoci přes internet se dozvíte zde:

On-line pomoc

Pokud nevíte, neváhejte se zeptat

© HelpMark | Tomáš Herout | Tel: +420 739 719 548