Your Own Font

Fonts are in the theme too. The classes font-sans, font-serif and font-mono come from the variables --font-sans, --font-serif and --font-mono, and every variable whose name starts with --font- makes a class that sets font-family. Let's give the headings a rounded, friendly font that suits a cat shelter: Baloo 2 from Google Fonts.

In the CSS course, you loaded a web font with link elements in the head of the page. That works with Tailwind too, but there's another way, right in the stylesheet: the @import rule, which loads another stylesheet, just as @import "tailwindcss" does. Google Fonts offers it in its embed code (Get embed code) too: choose @import instead of <link>, and copy only the line with @import, without the <style> tags around it.

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

The address is the same as in a link element: the Baloo 2 font in the weights 400, 600 and 700 (in the address, the space in the name is written as +). Mind the order: an @import must come before all other rules in a stylesheet. @import "tailwindcss" brings in a lot of rules (Preflight and the classes), so an @import written after it comes too late. The browser skips it, without any error, and the page simply uses the fallback font.

Then you add the font to the theme:

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

The variable --font-display makes the class font-display:

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

The value is a list of fonts, as in font-family: if Baloo 2 can't be downloaded, the browser uses its sans-serif font. The name has a space in it, so it must be in quotes, as you know from the CSS course. The name display is our choice: fonts for headings and other large text are called display fonts. You could just as well call the variable --font-headings and use the class font-headings.

You can also change a value that Tailwind already has. Preflight gives the whole page the font from --font-sans, so with --font-sans: "Nunito", sans-serif; in @theme, all the text on the page would be in Nunito (if you imported it too).