diff --git a/docs/content/1.getting-started/3.theme.md b/docs/content/1.getting-started/3.theme.md
index be20cb14..25b548d6 100644
--- a/docs/content/1.getting-started/3.theme.md
+++ b/docs/content/1.getting-started/3.theme.md
@@ -13,7 +13,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
 @import "@nuxt/ui";
 
 @theme {
-  --font-family-display: "Inter", "sans-serif";
+  --font-family-sans: 'Public Sans', sans-serif;
 
   --breakpoint-3xl: 1920px;
 
diff --git a/docs/content/1.getting-started/6.fonts.md b/docs/content/1.getting-started/6.fonts.md
index 4f9ccc63..7bfa72b6 100644
--- a/docs/content/1.getting-started/6.fonts.md
+++ b/docs/content/1.getting-started/6.fonts.md
@@ -19,7 +19,7 @@ Nuxt UI automatically registers the `@nuxt/fonts` module for you, so there's no
 @import "@nuxt/ui";
 
 @theme {
-  --font-family-sans: Inter, sans-serif;
+  --font-family-sans: 'Public Sans', sans-serif;
 }
 </style>
 ```
@@ -29,7 +29,7 @@ Nuxt UI automatically registers the `@nuxt/fonts` module for you, so there's no
 @import "@nuxt/ui";
 
 @theme {
-  --font-family-sans: Inter, sans-serif;
+  --font-family-sans: 'Public Sans', sans-serif;
 }
 ```