diff --git a/.changeset/hot-toys-compare.md b/.changeset/hot-toys-compare.md
new file mode 100644
index 0000000000..5b79b64166
--- /dev/null
+++ b/.changeset/hot-toys-compare.md
@@ -0,0 +1,5 @@
+---
+'@sumup-oss/design-tokens': major
+---
+
+Changed the default font from Aktiv Grotesk to Inter, a variable font. Variable fonts combine a continuous range of weights and other "axes" into a single file. This speeds up page load times and enables more creative freedom. Inter is a close match to Aktiv Grotesk, so users shouldn't notice a difference.
diff --git a/.changeset/itchy-geckos-protect.md b/.changeset/itchy-geckos-protect.md
new file mode 100644
index 0000000000..fb94a4db72
--- /dev/null
+++ b/.changeset/itchy-geckos-protect.md
@@ -0,0 +1,5 @@
+---
+'@sumup-oss/design-tokens': major
+---
+
+Added a new `@sumup-oss/design-tokens/fonts.css` file containing the `@font-face` declarations to load the Inter font family. Refer to the documentation on [how to load fonts in your application](https://github.com/sumup-oss/circuit-ui/tree/main/packages/design-tokens#fonts).
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 0eb2b1f8c5..27d8284f99 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -4,46 +4,20 @@
 />
 <link
   rel="preload"
-  href="https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2"
-/>
-<link
-  rel="preload"
-  href="https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2"
+  href="https://static.sumup.com/fonts/Inter/Inter-normal-latin.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin
 />
 <style>
-  @font-face {
-    font-family: 'aktiv-grotesk';
-    font-weight: 400;
-    font-display: swap;
-    src:
-      url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2')
-        format('woff2'),
-      url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff')
-        format('woff'),
-      url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.eot')
-        format('embedded-opentype');
-  }
-  @font-face {
-    font-family: 'aktiv-grotesk';
-    font-weight: 700;
-    font-display: swap;
-    src:
-      url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2')
-        format('woff2'),
-      url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff')
-        format('woff'),
-      url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.eot')
-        format('embedded-opentype');
-  }
   #storybook-root {
     padding: env(safe-area-inset-top) env(safe-area-inset-right)
       env(safe-area-inset-bottom) env(safe-area-inset-left);
   }
 
   html {
-    font-family: 'aktiv-grotesk', Helvetica, Arial, system-ui, sans-serif,
-      'Segoe UI', Roboto, 'Apple Color Emoji', 'Segoe UI Emoji',
-      'Segoe UI Symbol';
+    font-family: 'Inter', Helvetica, Arial, system-ui, sans-serif, 'Segoe UI',
+      Roboto, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   }
 
   .sbdocs.sbdocs-content {
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 601cf3dc6a..203c82d28e 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,3 +1,4 @@
+import '@sumup-oss/design-tokens/fonts.css';
 import '@sumup-oss/design-tokens/dynamic.css';
 import '../packages/circuit-ui/styles/base.css';
 
diff --git a/.storybook/themes.ts b/.storybook/themes.ts
index 5e4299b9fa..68bc3bdaec 100644
--- a/.storybook/themes.ts
+++ b/.storybook/themes.ts
@@ -7,7 +7,7 @@ const brand = {
   brandTitle: 'Circuit UI',
   brandUrl: 'https://github.com/sumup-oss/circuit-ui',
   fontBase:
-    'aktiv-grotesk, Helvetica, Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    '"Inter", Helvetica, Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
 };
 
 export const light = create({
diff --git a/docs/introduction/2-getting-started.mdx b/docs/introduction/2-getting-started.mdx
index 3d73205d67..5cceff8e00 100644
--- a/docs/introduction/2-getting-started.mdx
+++ b/docs/introduction/2-getting-started.mdx
@@ -47,10 +47,11 @@ We also recommend installing and configuring [`@sumup-oss/eslint-plugin-circuit-
 
 SumUp's default theme is part of the [@sumup-oss/design-tokens](https://www.npmjs.com/package/@sumup-oss/design-tokens) package. Refer to the [Theme documentation](Features/Theme/Docs) to learn how to use and customize the theme.
 
-To make the theme available to Circuit UI, import the theme styles _before_ the component styles:
+To make the theme available to Circuit UI, import the fonts and design tokens _before_ the component styles:
 
 ```tsx
 // /app/layout.tsx or /pages/_app.tsx for Next.js
+import '@sumup-oss/design-tokens/fonts.css';
 import '@sumup-oss/design-tokens/light.css';
 import '@sumup-oss/circuit-ui/styles.css';
 ```
@@ -61,16 +62,11 @@ Finally, make sure that the viewport meta tag includes `viewport-fit=cover`, and
 
 ```tsx
 // /app/layout.tsx or /pages/_app.tsx for Next.js
+import '@sumup-oss/design-tokens/fonts.css';
 import '@sumup-oss/design-tokens/light.css';
 import '@sumup-oss/circuit-ui/styles.css';
 import Head from 'next/head';
 
-const Layout = css`
-  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(
-      safe-area-inset-bottom
-    ) env(safe-area-inset-left);
-`;
-
 export default function App() {
   return (
     <>
@@ -80,7 +76,14 @@ export default function App() {
           content="width=device-width, initial-scale=1.0, viewport-fit=cover"
         />
       </Head>
-      <Layout>{/* Your app */}</Layout>
+      <body
+        style={{
+          padding:
+            'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
+        }}
+      >
+        {/* Your app */}
+      </body>
     </>
   );
 }
diff --git a/packages/circuit-ui/styles/base.css b/packages/circuit-ui/styles/base.css
index 21e82e8317..345b500f10 100644
--- a/packages/circuit-ui/styles/base.css
+++ b/packages/circuit-ui/styles/base.css
@@ -1,32 +1,5 @@
 /* stylelint-disable no-duplicate-selectors -- Sections are split to separate third-party from first-party code */
 
-/* Start downloading custom fonts as soon as possible */
-@font-face {
-  font-family: aktiv-grotesk;
-  font-weight: 400;
-  src:
-    url("https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2")
-      format("woff2"),
-    url("https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff")
-      format("woff"),
-    url("https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.eot")
-      format("embedded-opentype");
-  font-display: optional;
-}
-
-@font-face {
-  font-family: aktiv-grotesk;
-  font-weight: 700;
-  src:
-    url("https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2")
-      format("woff2"),
-    url("https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff")
-      format("woff"),
-    url("https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.eot")
-      format("embedded-opentype");
-  font-display: optional;
-}
-
 /**
  * reset.css
  * http://meyerweb.com/eric/tools/css/reset/
diff --git a/packages/design-tokens/README.md b/packages/design-tokens/README.md
index daae0601d3..3ecb03d6fa 100644
--- a/packages/design-tokens/README.md
+++ b/packages/design-tokens/README.md
@@ -22,10 +22,11 @@ yarn add @sumup-oss/design-tokens
 
 ## Usage
 
-The design tokens are exported as [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). Choose a [color scheme](#color-schemes), then import the corresponding CSS file globally in your application, such as in Next.js' `app/layout.tsx` file:
+The design tokens are exported as [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). Choose a [font loading strategy](#fonts) and a [color scheme](#color-schemes), then import the corresponding CSS file globally in your application, such as in Next.js' `app/layout.tsx` file:
 
 ```tsx
 // app/layout.tsx
+import '@sumup-oss/design-tokens/fonts.css';
 import '@sumup-oss/design-tokens/light.css';
 
 function App({ Component, pageProps }) {
@@ -37,6 +38,56 @@ The application code must be processed by a bundler that can handle CSS files. [
 
 Refer to the [theme documentation](https://circuit.sumup.com/?path=/docs/features-theme--docs) for a complete reference of the available tokens.
 
+### Fonts
+
+#### Default
+
+Import the stylesheet that contains the font face declarations globally in your application, such as in a global layout file:
+
+```ts
+import '@sumup-oss/design-tokens/fonts.css';
+```
+
+To speed up the loading of the fonts, add preload links to the global `<head>` element of your application. Choose which subsets to preload based on the languages your app supports. The available subsets are `latin`, `latin-ext`, `cyrillic`, `cyrillic-ext`, `greek`, `greek-ext`, and `vietnamese`.
+
+```html
+<link
+  rel="preload"
+  href="https://static.sumup.com/fonts/Inter/Inter-normal-latin.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin
+/>
+```
+
+#### Next.js
+
+If you're using Next.js 13+, use the built-in [font optimization](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) feature with this recommended configuration instead:
+
+```tsx
+// app/layout.tsx
+import { Inter } from 'next/font/google';
+
+const inter = Inter({
+  // Choose which subsets to preload based on the languages your app supports
+  subsets: ['latin'],
+  // Note that Next.js <14.2.6 contains outdated Google Fonts data which prevents
+  // usage of the `ital` axis (see https://github.com/vercel/next.js/issues/68395)
+  axes: ['ital'],
+  variable: '--cui-font-stack-default',
+  display: 'swap',
+  preload: true,
+});
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.variable}>{children}</body>
+    </html>
+  );
+}
+```
+
 ### Color schemes
 
 #### Single color scheme
diff --git a/packages/design-tokens/scripts/build.spec.ts b/packages/design-tokens/scripts/build.spec.ts
index a4d16b9789..e6e49e340e 100644
--- a/packages/design-tokens/scripts/build.spec.ts
+++ b/packages/design-tokens/scripts/build.spec.ts
@@ -18,109 +18,51 @@ import { describe, it, expect } from 'vitest';
 import type { Token } from '../types/index.js';
 
 import {
-  validateTheme,
+  validateTokens,
   createCSSCustomProperties,
-  createStyles,
+  createFontFaceDeclarations,
+  type TokenConfig,
+  type FontFaceConfig,
 } from './build.js';
 
 describe('build', () => {
-  it('should throw not throw an error when tokens are  missing in a scoped theme', () => {
-    const theme = {
-      name: 'test',
-      groups: [
+  describe('validateTokens', () => {
+    it('should throw an error when a token does not match the expected type', () => {
+      const tokens = [
         {
-          colorScheme: 'light' as const,
-          selectors: ['[data-color-scheme="light"]'],
-          tokens: [
-            {
-              name: '--cui-bg-normal',
-              description:
-                'Use as normal background color in any given interface',
-              value: '#00f2b840',
-              type: 'color',
-            },
-          ] as Token[],
+          name: '--cui-bg-normal',
+          description: 'Use as normal background color in any given interface',
+          value: '#00f2b840',
+          type: 'spacing',
         },
-      ],
-    };
-
-    const actual = () => validateTheme(theme);
-
-    expect(actual).not.toThrow();
-  });
-
-  describe('validateTheme', () => {
-    it('should throw an error when required tokens are not globally defined', () => {
-      const theme = {
-        name: 'test',
-        groups: [
-          {
-            colorScheme: 'light' as const,
-            selectors: [':root'],
-            tokens: [
-              {
-                name: '--cui-bg-normal',
-                description:
-                  'Use as normal background color in any given interface',
-                value: '#00f2b840',
-                type: 'color',
-              },
-            ] as Token[],
-          },
-        ],
-      };
+      ] as unknown as Token[];
 
-      const actual = () => validateTheme(theme);
+      const actual = () => validateTokens(tokens);
 
       expect(actual).toThrow(
-        'The "test" theme does not globally define the required "--cui-bg-normal-hovered" token. Add it to the ":root" selector.',
+        'The "--cui-bg-normal" token does not match the expected type. Expected "color". Received "spacing."',
       );
     });
+  });
 
-    it('should throw an error when a token does not match the expected type', () => {
-      const theme = {
-        name: 'test',
-        groups: [
+  describe('createCSSCustomProperties', () => {
+    it('should create CSS styles for the theme', () => {
+      const config = {
+        type: 'tokens',
+        tokens: [
           {
-            colorScheme: 'light' as const,
-            selectors: [':root'],
-            tokens: [
-              {
-                name: '--cui-bg-normal',
-                description:
-                  'Use as normal background color in any given interface',
-                value: '#00f2b840',
-                type: 'spacing',
-              },
-            ] as unknown as Token[],
+            name: '--cui-bg-normal',
+            description:
+              'Use as normal background color in any given interface',
+            value: '#00f2b840',
+            type: 'color',
           },
         ],
-      };
-
-      const actual = () => validateTheme(theme);
+        selectors: [':root'],
+        colorScheme: 'light' as const,
+      } satisfies TokenConfig;
 
-      expect(actual).toThrow(
-        'The "--cui-bg-normal" token does not match the expected type. Expected "color". Received "spacing."',
-      );
-    });
-  });
-
-  describe('createStyles', () => {
-    const theme = {
-      tokens: [
-        {
-          name: '--cui-bg-normal',
-          description: 'Use as normal background color in any given interface',
-          value: '#00f2b840',
-          type: 'color',
-        },
-      ] as Token[],
-      selectors: [':root'],
-      colorScheme: 'light' as const,
-    };
-
-    it('should create CSS styles for the theme', () => {
-      const actual = createStyles(theme);
+      const actual = createCSSCustomProperties(config);
 
       expect(actual).toMatchInlineSnapshot(
         `
@@ -131,36 +73,52 @@ describe('build', () => {
       `,
       );
     });
+  });
 
-    it('should create CSS styles for the theme', () => {
-      const actual = createStyles(theme);
+  describe('createFontFaceDeclarations', () => {
+    it('should create font face declarations for a custom font face', () => {
+      const config = {
+        type: 'font-faces',
+        fontFaces: [
+          {
+            'font-family': 'Inter',
+            'font-style': 'italic',
+            'font-weight': '100 900',
+            'font-display': 'swap',
+            'src':
+              'url("https://static.sumup.com/fonts/Inter/Inter-italic-cyrillic-ext.woff2") format("woff2")',
+            'unicode-range':
+              'U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F',
+          },
+        ],
+      } satisfies FontFaceConfig;
+
+      const actual = createFontFaceDeclarations(config);
 
       expect(actual).toMatchInlineSnapshot(
-        `
-        ":root {
-            color-scheme: light;
-            /* Use as normal background color in any given interface */ --cui-bg-normal: #00f2b840;
-          }"
-      `,
+        `"@font-face { font-family: Inter;font-style: italic;font-weight: 100 900;font-display: swap;src: url("https://static.sumup.com/fonts/Inter/Inter-italic-cyrillic-ext.woff2") format("woff2");unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }"`,
       );
     });
-  });
 
-  describe('createCSSCustomProperties', () => {
-    const tokens = [
-      {
-        name: '--cui-bg-normal',
-        description: 'Use as normal background color in any given interface',
-        value: '#00f2b840',
-        type: 'color',
-      },
-    ] as Token[];
+    it('should create font face declarations for a fallback font face', () => {
+      const config = {
+        type: 'font-faces',
+        fontFaces: [
+          {
+            'font-family': 'Inter-Fallback',
+            'src': 'local("Arial")',
+            'ascent-override': '90.49%',
+            'descent-override': '22.56%',
+            'line-gap-override': '0%',
+            'size-adjust': '107.06%',
+          },
+        ],
+      } satisfies FontFaceConfig;
 
-    it('should create CSS custom properties from the color tokens', () => {
-      const actual = createCSSCustomProperties(tokens);
+      const actual = createFontFaceDeclarations(config);
 
       expect(actual).toMatchInlineSnapshot(
-        '"/* Use as normal background color in any given interface */ --cui-bg-normal: #00f2b840;"',
+        `"@font-face { font-family: Inter-Fallback;src: local("Arial");ascent-override: 90.49%;descent-override: 22.56%;line-gap-override: 0%;size-adjust: 107.06%; }"`,
       );
     });
   });
diff --git a/packages/design-tokens/scripts/build.ts b/packages/design-tokens/scripts/build.ts
index e8ffef4e2f..a1dcdc8d8c 100755
--- a/packages/design-tokens/scripts/build.ts
+++ b/packages/design-tokens/scripts/build.ts
@@ -25,96 +25,112 @@ import { schema } from '../themes/schema.js';
 import { shared } from '../themes/shared.js';
 import { light } from '../themes/light.js';
 import { dark } from '../themes/dark.js';
-import type { ColorScheme, Token } from '../types/index.js';
+import type { ColorScheme, FontFace, Token } from '../types/index.js';
+import { inter } from '../themes/fonts.js';
 
-type StyleGroup = {
+export type TokenConfig = {
+  type: 'tokens';
   selectors: string[];
-  colorScheme: ColorScheme;
   tokens: Token[];
+  colorScheme: ColorScheme;
 };
 
-type Theme = {
-  name: string;
-  groups: StyleGroup[];
+export type FontFaceConfig = {
+  type: 'font-faces';
+  fontFaces: FontFace[];
 };
 
+type Configs = (TokenConfig | FontFaceConfig)[];
+
 function main(): void {
-  const themes: Theme[] = [
-    {
-      name: 'light',
-      groups: [
-        {
-          tokens: [...light, ...shared],
-          selectors: [':root'],
-          colorScheme: 'light',
-        },
-      ],
-    },
-    {
-      name: 'dark',
-      groups: [
-        {
-          tokens: [...dark, ...shared],
-          selectors: [':root'],
-          colorScheme: 'dark',
-        },
-      ],
-    },
-    {
-      name: 'light-scoped',
-      groups: [
-        {
-          tokens: light,
-          selectors: ['[data-color-scheme="light"]'],
-          colorScheme: 'light',
-        },
-      ],
-    },
-    {
-      name: 'dark-scoped',
-      groups: [
-        {
-          tokens: dark,
-          selectors: ['[data-color-scheme="dark"]'],
-          colorScheme: 'dark',
-        },
-      ],
-    },
-    {
-      name: 'dynamic',
-      groups: [
-        {
-          tokens: [...light, ...shared],
-          selectors: [':root'],
-          colorScheme: 'light',
-        },
-        {
-          tokens: dark,
-          selectors: ['@media (prefers-color-scheme: dark)', ':root'],
-          colorScheme: 'dark',
-        },
-        {
-          tokens: light,
-          selectors: ['[data-color-scheme="light"]'],
-          colorScheme: 'light',
-        },
-        {
-          tokens: dark,
-          selectors: ['[data-color-scheme="dark"]'],
-          colorScheme: 'dark',
-        },
-      ],
-    },
-  ];
+  const files: Record<string, Configs> = {
+    'light': [
+      {
+        type: 'tokens',
+        tokens: [...light, ...shared],
+        selectors: [':root'],
+        colorScheme: 'light',
+      },
+    ],
+    'dark': [
+      {
+        type: 'tokens',
+        tokens: [...dark, ...shared],
+        selectors: [':root'],
+        colorScheme: 'dark',
+      },
+    ],
+    'light-scoped': [
+      {
+        type: 'tokens',
+        tokens: light,
+        selectors: ['[data-color-scheme="light"]'],
+        colorScheme: 'light',
+      },
+    ],
+    'dark-scoped': [
+      {
+        type: 'tokens',
+        tokens: dark,
+        selectors: ['[data-color-scheme="dark"]'],
+        colorScheme: 'dark',
+      },
+    ],
+    'dynamic': [
+      {
+        type: 'tokens',
+        tokens: [...light, ...shared],
+        selectors: [':root'],
+        colorScheme: 'light',
+      },
+      {
+        type: 'tokens',
+        tokens: dark,
+        selectors: ['@media (prefers-color-scheme: dark)', ':root'],
+        colorScheme: 'dark',
+      },
+      {
+        type: 'tokens',
+        tokens: light,
+        selectors: ['[data-color-scheme="light"]'],
+        colorScheme: 'light',
+      },
+      {
+        type: 'tokens',
+        tokens: dark,
+        selectors: ['[data-color-scheme="dark"]'],
+        colorScheme: 'dark',
+      },
+    ],
+    'fonts': [
+      {
+        type: 'font-faces',
+        fontFaces: inter,
+      },
+    ],
+  };
 
   const targets = browserslistToTargets(browserslist());
 
-  themes.forEach((theme) => {
-    validateTheme(theme);
-
-    const filename = `${theme.name}.css`;
+  Object.entries(files).forEach(([name, configs]) => {
+    const filename = `${name}.css`;
     const filepath = path.join(__dirname, '../', filename);
-    const styles = theme.groups.map(createStyles).join('\n');
+    const styles = configs
+      .map((config) => {
+        switch (config.type) {
+          case 'tokens': {
+            validateTokens(config.tokens);
+            return createCSSCustomProperties(config);
+          }
+          case 'font-faces': {
+            return createFontFaceDeclarations(config);
+          }
+          default: {
+            throw new Error('Unsupported config type');
+          }
+        }
+      })
+      .join('\n');
     const { code } = transform({
       filename,
       code: Buffer.from(styles),
@@ -126,70 +142,36 @@ function main(): void {
 }
 
 /**
- * Validates that the theme includes all expected tokens
- * and that the token values match the expected type.
+ * Validates that the token values match the expected type.
  */
-export function validateTheme(theme: Theme): void {
-  // Validate the token types
-  theme.groups.forEach(({ tokens }) => {
-    tokens.forEach(({ name, type }) => {
-      const token = schema.find((t) => t.name === name);
-
-      if (!token) {
-        return;
-        // throw new Error(`The theme is missing the required "${name}" token.`);
-      }
-
-      if (token.type !== type) {
-        throw new Error(
-          [
-            `The "${name}" token does not match the expected type.`,
-            `Expected "${token.type as string}". Received "${type as string}."`,
-          ].join(' '),
-        );
-      }
-    });
+export function validateTokens(tokens: Token[]): void {
+  tokens.forEach(({ name, type }) => {
+    const token = schema.find((t) => t.name === name);
+
+    if (!token) {
+      return;
+    }
+
+    if (token.type !== type) {
+      throw new Error(
+        [
+          `The "${name}" token does not match the expected type.`,
+          `Expected "${token.type as string}". Received "${type as string}."`,
+        ].join(' '),
+      );
+    }
   });
-
-  // Validate that the tokens at the root are complete
-  const rootGroup = theme.groups.find(
-    (group) => group.selectors.length === 1 && group.selectors[0] === ':root',
-  );
-
-  if (!rootGroup) {
-    return;
-  }
-
-  if (rootGroup.tokens.length !== schema.length) {
-    schema.forEach(({ name }) => {
-      const token = rootGroup.tokens.find((t) => t.name === name);
-
-      if (!token) {
-        throw new Error(
-          `The "${theme.name}" theme does not globally define the required "${name}" token. Add it to the ":root" selector.`,
-        );
-      }
-    });
-  }
-}
-
-export function createStyles(group: StyleGroup) {
-  const selectorStart = group.selectors
-    .map((selector) => `${selector} {`)
-    .join('');
-  const selectorEnd = group.selectors.map(() => '}').join('');
-  const customProperties = createCSSCustomProperties(group.tokens);
-  return `${selectorStart}
-    color-scheme: ${group.colorScheme};
-    ${customProperties}
-  ${selectorEnd}`;
 }
 
 /**
  * Generates CSS custom properties from the tokens
  */
-export function createCSSCustomProperties(tokens: Token[]): string {
-  return tokens
+export function createCSSCustomProperties(config: TokenConfig) {
+  const selectorStart = config.selectors
+    .map((selector) => `${selector} {`)
+    .join('');
+  const selectorEnd = config.selectors.map(() => '}').join('');
+  const customProperties = config.tokens
     .flatMap((token) => {
       const { description, name, value } = token;
       const lines: string[] = [];
@@ -203,6 +185,26 @@ export function createCSSCustomProperties(tokens: Token[]): string {
       return lines;
     })
     .join(' ');
+
+  return `${selectorStart}
+    color-scheme: ${config.colorScheme};
+    ${customProperties}
+  ${selectorEnd}`;
+}
+
+/**
+ * Generates font face declarations from the font faces
+ */
+export function createFontFaceDeclarations(config: FontFaceConfig): string {
+  return config.fontFaces
+    .map((fontFace) => {
+      const properties = Object.entries(fontFace)
+        .map(([name, value]) => `${name}: ${value};`)
+        .join('');
+
+      return `@font-face { ${properties} }`;
+    })
+    .join(' ');
 }
 
 try {
diff --git a/packages/design-tokens/tests/__snapshots__/index.spec.ts.snap b/packages/design-tokens/tests/__snapshots__/index.spec.ts.snap
index 5ca2f336db..9a20bbe82f 100644
--- a/packages/design-tokens/tests/__snapshots__/index.spec.ts.snap
+++ b/packages/design-tokens/tests/__snapshots__/index.spec.ts.snap
@@ -28,7 +28,7 @@ exports[`Themes > light > should match the snapshot 1`] = `
     "untilTera": "(max-width: 1279px)",
   },
   "fontStack": {
-    "default": "aktiv-grotesk, Helvetica, Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"",
+    "default": ""Inter", Helvetica, Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"",
     "mono": "Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace",
   },
   "fontWeight": {
diff --git a/packages/design-tokens/themes/fonts.ts b/packages/design-tokens/themes/fonts.ts
new file mode 100644
index 0000000000..ff5afea334
--- /dev/null
+++ b/packages/design-tokens/themes/fonts.ts
@@ -0,0 +1,156 @@
+/**
+ * Copyright 2024, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { FontFace } from '../types/index.js';
+
+export const inter = [
+  /* cyrillic-ext */
+  {
+    'font-family': 'Inter',
+    'font-style': 'italic',
+    'font-weight': '100 900',
+    'font-display': 'swap',
+    'src':
+      'url("https://static.sumup.com/fonts/Inter/Inter-italic-cyrillic-ext.woff2") format("woff2")',
+    'unicode-range':
+      'U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F',
+  },
+  /* cyrillic */
+  {
+    'font-family': 'Inter',
+    'font-style': 'italic',
+    'font-weight': '100 900',
+    'font-display': 'swap',
+    'src':
+      'url("https://static.sumup.com/fonts/Inter/Inter-italic-cyrillic.woff2") format("woff2")',
+    'unicode-range': 'U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116',
+  },
+  /* greek-ext */
+  {
+    'font-family': 'Inter',
+    'font-style': 'italic',
+    'font-weight': '100 900',
+    'font-display': 'swap',
+    'src':
+      'url("https://static.sumup.com/fonts/Inter/Inter-italic-greek-ext.woff2") format("woff2")',
+    'unicode-range': 'U+1F00-1FFF',
+  },
+  /* greek */
+  {
+    'font-family': 'Inter',
+    'font-style': 'italic',
+    'font-weight': '100 900',
+    'font-display': 'swap',
+    'src':
+      'url("https://static.sumup.com/fonts/Inter/Inter-italic-greek.woff2") format("woff2")',
+    'unicode-range':
+      'U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF',
+  },
+  /* latin-ext */
+  {
+    'font-family': 'Inter',
+    'font-style': 'italic',
+    'font-weight': '100 900',
+    'font-display': 'swap',
+    'src':
+      'url("https://static.sumup.com/fonts/Inter/Inter-italic-latin-ext.woff2") format("woff2")',
+    'unicode-range':
+      'U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF',
+  },
+  /* latin */
+  {
+    'font-family': 'Inter',
+    'font-style': 'italic',
+    'font-weight': '100 900',
+    'font-display': 'swap',
+    'src':
+      'url("https://static.sumup.com/fonts/Inter/Inter-italic-latin.woff2") format("woff2")',
+    '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',
+  },
+  /* cyrillic-ext */
+  {
+    'font-family': 'Inter',
+    'font-style': 'normal',
+    'font-weight': '100 900',
+    'font-display': 'swap',
+    'src':
+      'url("https://static.sumup.com/fonts/Inter/Inter-normal-cyrillic-ext.woff2") format("woff2")',
+    'unicode-range':
+      'U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F',
+  },
+  /* cyrillic */
+  {
+    'font-family': 'Inter',
+    'font-style': 'normal',
+    'font-weight': '100 900',
+    'font-display': 'swap',
+    'src':
+      'url("https://static.sumup.com/fonts/Inter/Inter-normal-cyrillic.woff2") format("woff2")',
+    'unicode-range': 'U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116',
+  },
+  /* greek-ext */
+  {
+    'font-family': 'Inter',
+    'font-style': 'normal',
+    'font-weight': '100 900',
+    'font-display': 'swap',
+    'src':
+      'url("https://static.sumup.com/fonts/Inter/Inter-normal-greek-ext.woff2") format("woff2")',
+    'unicode-range': 'U+1F00-1FFF',
+  },
+  /* greek */
+  {
+    'font-family': 'Inter',
+    'font-style': 'normal',
+    'font-weight': '100 900',
+    'font-display': 'swap',
+    'src':
+      'url("https://static.sumup.com/fonts/Inter/Inter-normal-greek.woff2") format("woff2")',
+    'unicode-range':
+      'U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF',
+  },
+  /* latin-ext */
+  {
+    'font-family': 'Inter',
+    'font-style': 'normal',
+    'font-weight': '100 900',
+    'font-display': 'swap',
+    'src':
+      'url("https://static.sumup.com/fonts/Inter/Inter-normal-latin-ext.woff2") format("woff2")',
+    'unicode-range':
+      'U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF',
+  },
+  /* latin */
+  {
+    'font-family': 'Inter',
+    'font-style': 'normal',
+    'font-weight': '100 900',
+    'font-display': 'swap',
+    'src':
+      'url("https://static.sumup.com/fonts/Inter/Inter-normal-latin.woff2") format("woff2")',
+    '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',
+  },
+  /* fallback */
+  {
+    'font-family': 'Inter-Fallback',
+    'src': 'local("Arial")',
+    'ascent-override': '90.49%',
+    'descent-override': '22.56%',
+    'line-gap-override': '0%',
+    'size-adjust': '107.06%',
+  },
+] satisfies FontFace[];
diff --git a/packages/design-tokens/themes/legacy/light.ts b/packages/design-tokens/themes/legacy/light.ts
index ae2cf92251..dde79027b2 100644
--- a/packages/design-tokens/themes/legacy/light.ts
+++ b/packages/design-tokens/themes/legacy/light.ts
@@ -118,7 +118,7 @@ export const typography = {
 
 export const fontStack: FontStack = {
   default:
-    'aktiv-grotesk, Helvetica, Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    '"Inter", Helvetica, Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
   mono: 'Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace',
 };
 
diff --git a/packages/design-tokens/themes/shared.ts b/packages/design-tokens/themes/shared.ts
index cb524c3dc6..31e4974113 100644
--- a/packages/design-tokens/themes/shared.ts
+++ b/packages/design-tokens/themes/shared.ts
@@ -58,11 +58,10 @@ export const shared = [
     value: '2px',
     type: 'dimension',
   },
-  /* Font families */
   {
     name: '--cui-font-stack-default',
     value:
-      'aktiv-grotesk, Helvetica, Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+      '"Inter", "Inter-Fallback", Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     type: 'fontFamily',
   },
   {
diff --git a/packages/design-tokens/types/index.ts b/packages/design-tokens/types/index.ts
index 860d6a4339..edbb8dd5e6 100644
--- a/packages/design-tokens/types/index.ts
+++ b/packages/design-tokens/types/index.ts
@@ -161,6 +161,26 @@ export interface Theme {
 
 export type ColorScheme = 'light' | 'dark';
 
+export type FontFace =
+  // Custom font
+  | {
+      'font-family': string;
+      'font-style': 'normal' | 'italic' | 'oblique';
+      'font-weight': `${number}` | `${number} ${number}`;
+      'font-display': 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+      'src': string;
+      'unicode-range': string;
+    }
+  // Web safe fallback font
+  | {
+      'font-family': string;
+      'src': `local(${string})`;
+      'ascent-override'?: `${number}%`;
+      'descent-override'?: `${number}%`;
+      'line-gap-override'?: `${number}%`;
+      'size-adjust'?: `${number}%`;
+    };
+
 /**
  * The token definitions below are loosely based on
  * https://github.com/design-tokens/community-group
diff --git a/templates/astro/src/layouts/Root.astro b/templates/astro/src/layouts/Root.astro
index b041244ba1..9799f9cbc8 100644
--- a/templates/astro/src/layouts/Root.astro
+++ b/templates/astro/src/layouts/Root.astro
@@ -1,4 +1,5 @@
 ---
+import '@sumup-oss/design-tokens/fonts.css';
 import '@sumup-oss/design-tokens/light.css';
 import '@sumup-oss/circuit-ui/styles.css';
 
@@ -19,6 +20,15 @@ const { title } = Astro.props;
       content="width=device-width,initial-scale=1,viewport-fit=cover"
     />
 
+    {/* Font performance optimization */}
+    <link
+      rel="preload"
+      href="https://static.sumup.com/fonts/Inter/Inter-normal-latin.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+
     {/* Browser icons */}
     <link
       rel="apple-touch-icon"
@@ -57,16 +67,6 @@ const { title } = Astro.props;
     <meta name="msapplication-TileColor" content="#ffffff" />
     <meta name="theme-color" content="#ffffff" />
 
-    {/* Performance optimizations */}
-    <link
-      rel="preload"
-      href="https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2"
-    />
-    <link
-      rel="preload"
-      href="https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2"
-    />
-
     <title>{title}</title>
   </head>
   <body>
diff --git a/templates/nextjs/template/app/layout.tsx b/templates/nextjs/template/app/layout.tsx
index c1a51ba2e4..f4a8d8c30f 100644
--- a/templates/nextjs/template/app/layout.tsx
+++ b/templates/nextjs/template/app/layout.tsx
@@ -1,9 +1,17 @@
 import type { Metadata, Viewport } from 'next';
+import { Inter } from 'next/font/google';
 
 import '@sumup-oss/design-tokens/light.css';
 import '@sumup-oss/circuit-ui/styles.css';
 
-import { PreloadResources } from './preload-resources';
+const inter = Inter({
+  subsets: ['latin'],
+  // FIXME: Re-enable once https://github.com/vercel/next.js/issues/68395 has been resolved
+  // axes: ['ital'],
+  variable: '--cui-font-stack-default',
+  display: 'swap',
+  preload: true,
+});
 
 export const metadata: Metadata = {
   title: {
@@ -34,8 +42,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <PreloadResources />
+    <html lang="en" className={inter.variable}>
       <body>{children}</body>
     </html>
   );
diff --git a/templates/nextjs/template/app/preload-resources.tsx b/templates/nextjs/template/app/preload-resources.tsx
deleted file mode 100644
index a89ed062f3..0000000000
--- a/templates/nextjs/template/app/preload-resources.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-'use client';
-
-import ReactDOM from 'react-dom';
-
-export function PreloadResources() {
-  ReactDOM.preload(
-    'https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2',
-    { as: 'font' },
-  );
-  ReactDOM.preload(
-    'https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2',
-    { as: 'font' },
-  );
-
-  return null;
-}
diff --git a/templates/remix/app/root.tsx b/templates/remix/app/root.tsx
index 916f4e8a9f..d56e156eb9 100644
--- a/templates/remix/app/root.tsx
+++ b/templates/remix/app/root.tsx
@@ -10,6 +10,7 @@ import {
 } from '@remix-run/react';
 import { SumUpLogo } from '@sumup-oss/icons';
 
+import '@sumup-oss/design-tokens/fonts.css';
 import '@sumup-oss/design-tokens/light.css';
 import '@sumup-oss/circuit-ui/styles.css';
 
@@ -29,6 +30,15 @@ export default function App() {
           content="width=device-width,initial-scale=1,viewport-fit=cover"
         />
 
+        {/* Font performance optimization */}
+        <link
+          rel="preload"
+          href="https://static.sumup.com/fonts/Inter/Inter-normal-latin.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin=""
+        />
+
         {/* Browser icons */}
         <link
           rel="apple-touch-icon"
@@ -67,16 +77,6 @@ export default function App() {
         <meta name="msapplication-TileColor" content="#ffffff" />
         <meta name="theme-color" content="#ffffff" />
 
-        {/* Performance optimizations */}
-        <link
-          rel="preload"
-          href="https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2"
-        />
-        <link
-          rel="preload"
-          href="https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2"
-        />
-
         <Meta />
         <Links />
       </head>