---
title: Fonts
description: 'Nuxt UI integrates with `@nuxt/fonts` to provide plug-and-play font optimization.'
links:
  - label: 'nuxt/fonts'
    to: https://github.com/nuxt/fonts
    target: _blank
    icon: i-simple-icons-github
---

## Usage

Nuxt UI automatically registers the `@nuxt/fonts` module for you, so there's no additional setup required. To use a font in your Nuxt UI application, you can simply declare it in your CSS:

::code-group

```vue [app.vue]
<style>
@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --font-family-sans: 'Public Sans', sans-serif;
}
</style>
```

```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --font-family-sans: 'Public Sans', sans-serif;
}
```

::

That's it! Nuxt Fonts will detect this and you should immediately see the web font loaded in your browser.

::tip{to="https://fonts.nuxt.com/advanced" target="_blank"}
Read more about how `@nuxt/fonts` work behind the scenes to optimize your fonts.
::