Importace webových písem

Webová písma najdeme zdarma na stránkách jako například Google Fonts, kde si vyberete písmo, potom si vyberete tloušťky písma, které chcete importovat a nakonec si vyberete způsob jakým chcete písmo importovat do webové stránky. Na výběr je ze dvou možností.

Importovat písmo pomocí HTML prvku link nebo pomocí CSS pravidla @import. Importování pomocí prvku link je standardem a proto tento způsob použijeme.

Import písma pomocí link prvku může vypadat následovně:

<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=Roboto&display=swap" rel="stylesheet">

Toto pouze zkopírujete a vložíte do head prvku následovně:

<head>
	<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=Roboto&display=swap" rel="stylesheet">
</head>

Nyní již můžeme font používat v CSS. Jediný rozdíl je, že musíme název písma vložit do uvozovek. Když bychom importovali písmo Roboto, použití tohoto písma by vypadalo následovně:

* {
	font-family: "Roboto", sans-serif;
}

Všimněte si použití uvozovek a záložního písma sans-serif, které by se použilo, kdyby se nemohlo Roboto načíst.

Pokyny

Importujte písmo Inter do prvku head, pomocí následujících prvků link:

<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">

Dávejte pozor abyste si nesmazali prvek link, který již v hlavičce (head) je.

Změňte rodinu písem (font-family) všech prvků (*) na “Inter”, sans-serif;.

Začněte programovat zdarma

8/9