In addition to the default sans and mono fonts, Tairo defines heading and alt fonts to allow you to create more unique designs. By default, we use predefined system fonts from Tailwind CSS but you can easily change them by editing the tailwind.config.ts file.

As an example, this demo uses a custom set of fonts:

•Loading fonts

Defining a font in tailwind does not load the font for you. You need to load the font by yourself. You can load fonts using @fontsource packages, you can browse the list of available fonts on https://fontsource.org/, then install the package using pnpm:

Then import the font in your <app>/nuxt.config.ts file:

Now you can update your <app>/tailwind.config.ts file to use the font: