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, then install the package using pnpm:

The --filter flag is used to install the package only in the .app project.

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: