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í:

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.
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.
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]
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');
```
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].