Vlastní písmo

V motivu jsou i písma. Třídy font-sans, font-serif a font-mono pocházejí z proměnných --font-sans, --font-serif a --font-mono a každá proměnná, jejíž jméno začíná na --font-, vytvoří třídu, která nastavuje font-family. Dáme nadpisům oblé, přátelské písmo, které se ke kočičímu útulku hodí: Baloo 2 z Google Fonts.

V kurzu CSS jste webové písmo načítali prvky link v prvku head. To jde i s Tailwindem, ale existuje ještě jiný způsob, přímo v souboru se styly: pravidlo @import, které načte další soubor se styly, stejně jako to dělá @import "tailwindcss". Google Fonts ho také nabízí v kódu pro vložení (Get embed code): místo <link> zvolte @import a zkopírujte jen řádek s @import, bez tagů <style> kolem něj.

@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700&display=swap");
@import "tailwindcss";

Adresa je stejná jako v prvku link: písmo Baloo 2 v tloušťkách 400, 600 a 700 (mezera ve jménu se v adrese píše jako +). Pozor na pořadí: @import musí být v souboru se styly před všemi ostatními pravidly. @import "tailwindcss" přinese spoustu pravidel (Preflight a třídy), takže @import napsaný až za ním přijde pozdě. Prohlížeč ho bez jakékoli chyby přeskočí a stránka prostě použije záložní písmo.

Pak písmo přidáte do motivu:

@theme {
	--color-brand-500: #f97316;
	--color-brand-600: #ea580c;
	--font-display: "Baloo 2", sans-serif;
}

Proměnná --font-display vytvoří třídu font-display:

.font-display {
	font-family: var(--font-display);
}

Hodnota je seznam písem jako ve font-family: když se písmo Baloo 2 nepodaří stáhnout, použije prohlížeč své bezpatkové písmo. Ve jménu je mezera, a proto musí být v uvozovkách, jak víte z kurzu CSS. Jméno display jsme si vybrali sami: písmům pro nadpisy a další velký text se anglicky říká display fonts. Proměnnou byste stejně dobře mohli pojmenovat --font-nadpisy a používat třídu font-nadpisy.

Změnit můžete i hodnotu, kterou Tailwind už má. Preflight dává celé stránce písmo z --font-sans, takže s --font-sans: "Nunito", sans-serif; v @theme by byl celý text stránky v písmu Nunito (pokud byste ho také načetli).