ui/docs/content/1.getting-started/6.fonts.md

description, links

description	links
Nuxt UI integrates seamlessly with `@nuxt/fonts`, providing plug-and-play font optimization for your Nuxt applications.	label to target icon nuxt/fonts https://github.com/nuxt/fonts _blank 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

<style>
@import "tailwindcss";
@import "@nuxt/ui";

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

@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. ::