diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 4de2bdc4..8a76ba93 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { CssBaseline } from "@mui/material";
 import type { Preview } from "@storybook/react";
-
+import "@fontsource-variable/inter";
+import "./storybook.css"; /* Storybook CSS override */
 import { ThemeProvider } from "../src";
 import { GenericTheme, DiamondTheme } from "../src";
 
diff --git a/.storybook/storybook.css b/.storybook/storybook.css
new file mode 100644
index 00000000..3ceb2676
--- /dev/null
+++ b/.storybook/storybook.css
@@ -0,0 +1,58 @@
+:root {
+    --ds-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  
+    --ds-font-heading: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  
+    --ds-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco,
+      Consolas, 'Liberation Mono', 'Courier New', monospace;
+  }
+  
+  /* Docs root */
+  .sbdocs, .sbdocs p, .sbdocs li,.sb-unstyled, .sb-unstyled ul, .sb-unstyled li {
+    font-family: var(--ds-font-body);
+    font-size: 16px !important;
+    line-height: 1.6;
+  }
+  
+  /* Lists */
+  .sbdocs li {
+    font-size: 16px !important;
+  }
+  
+  /* Headings use Outfit or Inter */
+  
+  .sbdocs h1 {
+    font-family: var(--ds-font-heading);
+  }
+  
+  .sbdocs h3,
+  .sbdocs h4,
+  .sbdocs h5,
+  .sbdocs h6 {
+    font-family: var(--ds-font-body);
+  }
+  
+  /* Code uses IBM Plex Mono */
+  .sbdocs code,
+  .sbdocs pre,
+  .sbdocs kbd,
+  .sbdocs samp,
+  .token {
+    font-family: var(--ds-font-mono);
+    font-size: 1em;
+  }
+  
+  /* Neutralise Storybook Docs inline preview background wrapper */
+  .sbdocs-preview div[style*="background-color"], #storybook-root div[style*="background-color"] {
+    background-color: transparent !important;
+  }
+  
+  .light .sbdocs-preview div[style*="background-color"] {
+    background-color: #f6f6f6 !important;
+  }
+  
+  .dark .sbdocs-preview div[style*="background-color"]{
+    background-color: #212121   !important;
+  }
diff --git a/package.json b/package.json
index 52c035e5..d8cbba38 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "storybook:publish": "gh-pages -b storybook/publish -d storybook-static"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.2.8",
     "keycloak-js": "^26.2.1",
     "react-icons": "^5.3.0",
     "utif": "^3.1.0",
@@ -71,6 +72,9 @@
     "@babel/preset-typescript": "^7.26.10",
     "@chromatic-com/storybook": "^3.2.2",
     "@eslint/eslintrc": "^3.2.0",
+    "@fontsource/ibm-plex-mono": "^5.2.7",
+    "@fontsource/inter": "^5.2.8",
+    "@fontsource/outfit": "^5.2.8",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-json": "^6.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 75bba6b4..7d9139c0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,6 +24,9 @@ importers:
       '@emotion/styled':
         specifier: ^11.13.0
         version: 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+      '@fontsource-variable/inter':
+        specifier: ^5.2.8
+        version: 5.2.8
       '@jsonforms/core':
         specifier: ^3.7.0
         version: 3.7.0
@@ -70,6 +73,15 @@ importers:
       '@eslint/eslintrc':
         specifier: ^3.2.0
         version: 3.2.0
+      '@fontsource/ibm-plex-mono':
+        specifier: ^5.2.7
+        version: 5.2.7
+      '@fontsource/inter':
+        specifier: ^5.2.8
+        version: 5.2.8
+      '@fontsource/outfit':
+        specifier: ^5.2.8
+        version: 5.2.8
       '@rollup/plugin-commonjs':
         specifier: ^28.0.1
         version: 28.0.2(rollup@4.30.0)
@@ -1249,6 +1261,18 @@ packages:
     resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@fontsource-variable/inter@5.2.8':
+    resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==}
+
+  '@fontsource/ibm-plex-mono@5.2.7':
+    resolution: {integrity: sha512-MKAb8qV+CaiMQn2B0dIi1OV3565NYzp3WN5b4oT6LTkk+F0jR6j0ZN+5BKJiIhffDC3rtBULsYZE65+0018z9w==}
+
+  '@fontsource/inter@5.2.8':
+    resolution: {integrity: sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==}
+
+  '@fontsource/outfit@5.2.8':
+    resolution: {integrity: sha512-rXC6g0MqD7cOBjht0bMqc43qM6lRqDLML9KXsmg9uykz0wLQhy8Z/ajrMG6iyoT3NJR+MYgU+OEHp7uHoTb+Yw==}
+
   '@gerrit0/mini-shiki@3.7.0':
     resolution: {integrity: sha512-7iY9wg4FWXmeoFJpUL2u+tsmh0d0jcEJHAIzVxl3TG4KL493JNnisdLAILZ77zcD+z3J0keEXZ+lFzUgzQzPDg==}
 
@@ -6321,6 +6345,14 @@ snapshots:
       '@eslint/core': 0.17.0
       levn: 0.4.1
 
+  '@fontsource-variable/inter@5.2.8': {}
+
+  '@fontsource/ibm-plex-mono@5.2.7': {}
+
+  '@fontsource/inter@5.2.8': {}
+
+  '@fontsource/outfit@5.2.8': {}
+
   '@gerrit0/mini-shiki@3.7.0':
     dependencies:
       '@shikijs/engine-oniguruma': 3.7.0
diff --git a/src/themes/DiamondTheme.ts b/src/themes/DiamondTheme.ts
index 487f29ad..17500862 100644
--- a/src/themes/DiamondTheme.ts
+++ b/src/themes/DiamondTheme.ts
@@ -10,6 +10,20 @@ const dlsLogoBlue = "#202740";
 const dlsLogoYellow = "#facf07";
 
 const DiamondThemeOptions = mergeThemeOptions({
+  typography: {
+    fontFamily: [
+      "Inter Variable",
+      "Inter",
+      "system-ui",
+      "-apple-system",
+      '"Segoe UI"',
+      "Roboto",
+      "Helvetica",
+      "Arial",
+      "sans-serif",
+    ].join(","),
+  },
+
   logos: {
     normal: {
       src: logoImageLight,