diff --git a/web-components/src/rootStyles/design-tokens.mdx b/web-components/src/rootStyles/design-tokens.mdx
index a2a4d09..fccbab1 100644
--- a/web-components/src/rootStyles/design-tokens.mdx
+++ b/web-components/src/rootStyles/design-tokens.mdx
@@ -49,10 +49,31 @@ properties.
 
 ## Typography
 
-**Typeface:** {tokens.typography.main.fontFamily.value}
+**Typeface:** {tokens.typography.desktop.font.family.title.value}
 
 <div style={{ display: 'grid', gridTemplateColumns: 'max-content auto', gap: tokens.size['2'].value, alignItems: 'center' }}>
-  {Object.entries(tokens.typography)
+  {Object.entries(tokens.typography.body)
+    .map(([name, token]) => (
+      <div style={{ display: 'contents' }}>
+        <small>{name}</small>
+        <div
+          style={{
+            fontFamily: token.fontFamily.value,
+            fontSize: token.fontSize.value,
+            lineHeight: token.lineHeight.value,
+            fontWeight: token.fontWeight.value,
+            fontStretch: token.fontStretch.value,
+            letterSpacing: token.letterSpacing.value,
+            textDecorationStyle: token.textDecoration.value,
+            paragraphIndent: token.paragraphIndent.value,
+          }}
+        >
+          The quick brown fox jumps over the lazy dog
+        </div>
+      </div>
+    ))
+  }
+  {Object.entries(tokens.typography.header)
     .map(([name, token]) => (
       <div style={{ display: 'contents' }}>
         <small>{name}</small>
diff --git a/web-components/src/rootStyles/style.css b/web-components/src/rootStyles/style.css
index 661b74f..e0ec43d 100644
--- a/web-components/src/rootStyles/style.css
+++ b/web-components/src/rootStyles/style.css
@@ -2,17 +2,31 @@
 @import "./tokens-todo.css";
 @import "../internals/baseElement/global.css";
 
-/* For more infos about the font and its settings check out: https://fontsource.org/fonts/open-sans/cdn */
+/* For more infos about the font and its settings check out: https://fontsource.org/fonts/inter/cdn */
 @font-face {
-  font-family: "Inter";
+  font-family: "Inter Variable";
   font-style: normal;
   font-display: swap;
   font-weight: 100 900;
-  src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2)
-    format("woff2-variations");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
-    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range:
+    U+0000-00FF,
+    U+0131,
+    U+0152-0153,
+    U+02BB-02BC,
+    U+02C6,U+02DA,
+    U+02DC,U+0304,
+    U+0308,U+0329,
+    U+2000-206F,
+    U+2074,
+    U+20AC,
+    U+2122,
+    U+2191,
+    U+2193,
+    U+2212,
+    U+2215,
+    U+FEFF,
+    U+FFFD;
 }
 
 html {