diff --git a/apps/showcase/assets/styles/layout/_core.scss b/apps/showcase/assets/styles/layout/_core.scss
index 580a29eed..de5fc910c 100644
--- a/apps/showcase/assets/styles/layout/_core.scss
+++ b/apps/showcase/assets/styles/layout/_core.scss
@@ -4,6 +4,10 @@ html {
     font-feature-settings: "cv02","cv03","cv04","cv11";
 }
 
+.material {
+    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
 body {
     margin: 0px;
     min-height: 100%;
diff --git a/apps/showcase/layouts/AppConfigurator.vue b/apps/showcase/layouts/AppConfigurator.vue
index 30e15bce7..602f48652 100755
--- a/apps/showcase/layouts/AppConfigurator.vue
+++ b/apps/showcase/layouts/AppConfigurator.vue
@@ -278,6 +278,9 @@ export default {
             const preset = presets[value];
             const surfacePalette = this.surfaces.find((s) => s.name === this.selectedSurfaceColor)?.palette;
 
+            if (value === 'Material') document.documentElement.classList.add('material');
+            else document.documentElement.classList.remove('material');
+
             $t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
         }
     },
diff --git a/apps/showcase/nuxt.config.js b/apps/showcase/nuxt.config.js
index f6864b8bc..2e804a071 100644
--- a/apps/showcase/nuxt.config.js
+++ b/apps/showcase/nuxt.config.js
@@ -77,7 +77,8 @@ export default defineNuxtConfig({
             ],
             link: [
                 { rel: 'icon', href: baseUrl + 'favicon.ico' },
-                { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' }
+                { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' },
+                { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:400|Roboto:500|Roboto:600|Roboto:700', fetchpriority: 'low' }
             ],
             script: [
                 {