Webová písma

Zatím jsme používali písma, která jsou nainstalovaná skoro v každém počítači, jako Arial, Verdana, Georgia, Times New Roman nebo Courier New. Někdy se jim říká bezpečná webová písma. Můžete se na ně spolehnout, je jich ale jen pár a používá je spousta webů.

Webové písmo se stáhne z internetu spolu se stránkou, takže ho uvidí každý návštěvník, i když ho v zařízení nainstalované nemá. Tisíce webových písem zdarma najdete na Google Fonts. Tam si vyberete písmo a tloušťky, které chcete, a dostanete kousek kódu HTML, který vložíte do prvku head své stránky. Pro písmo Inter v tloušťkách 400, 700 a 900 vypadá takto:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">

• První dva řádky (preconnect, tedy předem se připojit) říkají prohlížeči, aby se k serverům Googlu připojil hned, takže se písmo stáhne dřív. Stránka by fungovala i bez nich, jen o něco pomaleji. Atribut crossorigin je potřeba kvůli zvláštnímu způsobu, jakým prohlížeče stahují písma; stačí ho zkopírovat.
• Třetí řádek připojuje soubor se styly stejně jako prvek link pro náš style.css, tento soubor je ale uložený na serveru Googlu a říká prohlížeči, odkud má stáhnout soubory s písmem. family=Inter:wght@400;700;900 znamená písmo Inter v tloušťkách 400, 700 a 900 a display=swap znamená, že dokud se písmo nestáhne, zobrazí se text záložním písmem.

Potom písmo použijeme v CSS:

body {
	font-family: Inter, Arial, sans-serif;
}

Ostatní písma necháme v seznamu jako záložní pro případ, že se webové písmo nepodaří stáhnout. Název Inter neobsahuje mezery, takže uvozovky nepotřebuje, "Inter" ale funguje také. Název s mezerami, například Open Sans, napište do uvozovek: "Open Sans".

Webové písmo má jen ty tloušťky, které si stáhneme. Vyžádali jsme si 400, 700 a 900, takže konečně můžeme hlavní nadpis udělat extra tučný.