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