diff --git a/tokens/.style-dictionary/config.js b/tokens/.style-dictionary/config.js
index a32d1ba08..e26453c80 100644
--- a/tokens/.style-dictionary/config.js
+++ b/tokens/.style-dictionary/config.js
@@ -17,6 +17,9 @@ const StyleDictionary = require( 'style-dictionary' ),
 					destination: '_variables.scss',
 					format: 'scss/variables',
 					filter: removeWikimediaUiBaseVars,
+					options: {
+						outputReferences: false,
+					},
 				} ],
 			},
 			css: {
diff --git a/tokens/properties/alias.json b/tokens/properties/alias.json
index 1761b977d..5b16d3818 100644
--- a/tokens/properties/alias.json
+++ b/tokens/properties/alias.json
@@ -3,22 +3,28 @@
         "family": {
             "style": {
                 "heading-serif": {
-                    "value": "{font.family.serif.value}"
+                    "value": "{font.family.serif.value}",
+                    "themeable": true
                 },
                 "heading-sans": {
-                    "value": "{font.family.sans.value}"
+                    "value": "{font.family.sans.value}",
+                    "themeable": true
                 },
                 "body": {
-                    "value": "{font.family.sans.value}"
+                    "value": "{font.family.sans.value}",
+                    "themeable": true
                 },
                 "body-s": {
-                    "value": "{font.family.sans.value}"
+                    "value": "{font.family.sans.value}",
+                    "themeable": true
                 },
                 "placeholder": {
-                    "value": "{font.family.sans.value}"
+                    "value": "{font.family.sans.value}",
+                    "themeable": true
                 },
                 "description": {
-                    "value": "{font.family.sans.value}"
+                    "value": "{font.family.sans.value}",
+                    "themeable": true
                 }
             }
         },
@@ -558,10 +564,12 @@
             },
             "link": {
                 "property": {
-                    "value": "{transition.property.color.value}"
+                    "value": "{transition.property.color.value}",
+                    "themeable": true
                 },
                 "duration": {
-                    "value": "{transition.duration.fast.value}"
+                    "value": "{transition.duration.fast.value}",
+                    "themeable": true
                 }
             }
         }
diff --git a/tokens/properties/mixins/Label.json b/tokens/properties/mixins/Label.json
index 990f08f26..daf4f6d3d 100644
--- a/tokens/properties/mixins/Label.json
+++ b/tokens/properties/mixins/Label.json
@@ -7,7 +7,8 @@
             "value": "{font.color.disabled.value}"
         },
         "font-family": {
-            "value": "{font.family.style.body.value}"
+            "value": "{font.family.style.body.value}",
+            "themeable": "true"
         },
         "font-size": {
             "value": "{font.size.style.body.value}"
diff --git a/vue-components/src/styles/main.scss b/vue-components/src/styles/main.scss
index 518873c27..364b824e4 100644
--- a/vue-components/src/styles/main.scss
+++ b/vue-components/src/styles/main.scss
@@ -1,5 +1,6 @@
+//@use './shared' as *;
 @import '~ress';
-@import '~@wmde/wikit-tokens/dist/variables';
+// @import '~@wmde/wikit-tokens/dist/variables';
 @import './mixins/Label';
 @import './mixins/Link';
 @import './mixins/InlineProgressBar';
diff --git a/vue-components/src/styles/shared.scss b/vue-components/src/styles/shared.scss
new file mode 100644
index 000000000..89309fc22
--- /dev/null
+++ b/vue-components/src/styles/shared.scss
@@ -0,0 +1,8 @@
+@forward '~@wmde/wikit-tokens/dist/variables' with (
+    $font-family-style-heading-serif: 'monospace',
+    $font-family-style-heading-sans: 'monospace',
+    $font-family-style-body: 'monospace',
+    $font-family-style-body-s:'monospace',
+    $font-family-style-placeholder: 'monospace',
+    $font-family-style-description:'monospace'
+);
diff --git a/vue-components/vue.config.js b/vue-components/vue.config.js
index dff283987..7e4ea5fa7 100644
--- a/vue-components/vue.config.js
+++ b/vue-components/vue.config.js
@@ -5,7 +5,7 @@ module.exports = {
 	css: {
 		loaderOptions: {
 			sass: {
-				additionalData: '@use "sass:math"; @import "@/styles/main.scss";',
+				additionalData: '@use "sass:math"; @use "@/styles/shared" as *; @import "@/styles/main.scss";',
 			},
 		},
 	},