diff --git a/devtools/app/app.vue b/devtools/app/app.vue
index c154c02c..a484d220 100644
--- a/devtools/app/app.vue
+++ b/devtools/app/app.vue
@@ -168,7 +168,7 @@ const isDark = computed({
 @import '@nuxt/ui';
 
 @theme {
-  --font-family-sans: 'DM Sans', sans-serif;
+  --font-sans: 'DM Sans', sans-serif;
 
   --color-primary-50: var(--ui-color-primary-50);
   --color-primary-100: var(--ui-color-primary-100);
diff --git a/docs/app/app.vue b/docs/app/app.vue
index ad4c7f38..0885f88a 100644
--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -126,7 +126,7 @@ provide('navigation', updatedNavigation)
 @theme {
   --container-8xl: 90rem;
 
-  --font-family-sans: 'Public Sans', sans-serif;
+  --font-sans: 'Public Sans', sans-serif;
 
   --color-green-50: #EFFDF5;
   --color-green-100: #D9FBE8;
diff --git a/docs/content/1.getting-started/3.theme.md b/docs/content/1.getting-started/3.theme.md
index 93832a61..3afc9393 100644
--- a/docs/content/1.getting-started/3.theme.md
+++ b/docs/content/1.getting-started/3.theme.md
@@ -16,7 +16,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
 @import "@nuxt/ui";
 
 @theme {
-  --font-family-sans: 'Public Sans', sans-serif;
+  --font-sans: 'Public Sans', sans-serif;
 
   --breakpoint-3xl: 1920px;
 
diff --git a/docs/content/1.getting-started/5.fonts.md b/docs/content/1.getting-started/5.fonts.md
index 2933bad4..a8e6b910 100644
--- a/docs/content/1.getting-started/5.fonts.md
+++ b/docs/content/1.getting-started/5.fonts.md
@@ -17,7 +17,7 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
 @import "@nuxt/ui";
 
 @theme {
-  --font-family-sans: 'Public Sans', sans-serif;
+  --font-sans: 'Public Sans', sans-serif;
 }
 ```
 
diff --git a/playground-vue/src/app.vue b/playground-vue/src/app.vue
index 683cadc7..f05f3bea 100644
--- a/playground-vue/src/app.vue
+++ b/playground-vue/src/app.vue
@@ -116,7 +116,7 @@ defineShortcuts({
 @import "@nuxt/ui";
 
 @theme {
-  --font-family-sans: 'Public Sans', sans-serif;
+  --font-sans: 'Public Sans', sans-serif;
 
   --color-green-50: #EFFDF5;
   --color-green-100: #D9FBE8;
diff --git a/playground/app/app.vue b/playground/app/app.vue
index 2780f323..174f65f7 100644
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -125,7 +125,7 @@ defineShortcuts({
 @import "@nuxt/ui";
 
 @theme {
-  --font-family-sans: 'Public Sans', sans-serif;
+  --font-sans: 'Public Sans', sans-serif;
 
   --color-green-50: #EFFDF5;
   --color-green-100: #D9FBE8;