This paragraph uses Tailwind's default sans-serif font (likely a system font unless overridden by browser defaults or user styles before Tailwind kicks in).
This paragraph uses the 'Roboto' font. We imported it via `@import` in the `
`, and are applying it using Tailwind's arbitrary value `font-['Roboto']`. If 'Roboto' was configured as `font-sans` in `tailwind.config.js`, you'd just use `font-sans`.This paragraph uses the 'Lobster' font. Similarly, imported and applied with an arbitrary value. If configured as `font-display` in `tailwind.config.js`, you'd use `font-display`.
Tailwind can define font family *names* (e.g., `font-primary` or `font-display` via `tailwind.config.js`). However, the browser needs the actual font *files*. You must link or import these (e.g., from Google Fonts, Adobe Fonts, or self-hosted files) for them to render correctly. This example works because we used `@import` in the `
`.