Eigene Schriftart

Auch Schriftarten gehören zum Theme. Die Klassen font-sans, font-serif und font-mono kommen von den Variablen --font-sans, --font-serif und --font-mono, und jede Variable, deren Name mit --font- beginnt, erzeugt eine Klasse, die font-family setzt. Geben wir den Überschriften eine runde, freundliche Schrift, die zu einem Tierheim passt: Baloo 2 von Google Fonts.

Im CSS-Kurs hast du eine Webschrift mit link-Elementen im head der Seite geladen. Das funktioniert auch mit Tailwind, aber es gibt einen anderen Weg, direkt im Stylesheet: die Regel @import, die ein weiteres Stylesheet lädt, genau wie @import "tailwindcss". Google Fonts bietet sie auch in seinem Einbettungscode an (Get embed code): Wähle @import statt <link> und kopiere nur die Zeile mit @import, ohne die <style>-Tags drumherum.

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

Die Adresse ist dieselbe wie in einem link-Element: die Schrift Baloo 2 in den Stärken 400, 600 und 700 (in der Adresse wird das Leerzeichen im Namen als + geschrieben). Achte auf die Reihenfolge: Ein @import muss vor allen anderen Regeln stehen in einem Stylesheet. @import "tailwindcss" bringt viele Regeln mit (Preflight und die Klassen), ein @import danach kommt also zu spät. Der Browser überspringt ihn ohne jede Fehlermeldung, und die Seite verwendet einfach die Ersatzschrift.

Dann fügst du die Schrift dem Theme hinzu:

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

Die Variable --font-titel erzeugt die Klasse font-titel:

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

Der Wert ist eine Liste von Schriften, wie bei font-family: Wenn Baloo 2 nicht heruntergeladen werden kann, verwendet der Browser seine serifenlose Schrift. Der Name enthält ein Leerzeichen, deshalb muss er in Anführungszeichen stehen, wie du es aus dem CSS-Kurs kennst. Der Name titel ist unsere Wahl: Schriften für Überschriften und anderen großen Text. Du könntest die Variable genauso gut --font-ueberschriften nennen und die Klasse font-ueberschriften verwenden.

Du kannst auch einen Wert ändern, den Tailwind schon hat. Preflight gibt der ganzen Seite die Schrift aus --font-sans. Mit --font-sans: "Nunito", sans-serif; in @theme wäre also der ganze Text der Seite in Nunito (wenn du sie auch importierst).