refactor(module)!: implement design system with CSS variables (#2298)

docs/content/1.getting-started/5.fonts.md

@@ -0,0 +1,30 @@
+---
+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:
+
+```vue [app.vue]
+<style>
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme {
+  --font-family-sans: 'Public Sans', sans-serif;
+}
+</style>
+```
+
+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.
+::