diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
index ea5609118d..7e00a87912 100644
--- a/.storybook/manager-head.html
+++ b/.storybook/manager-head.html
@@ -1,25 +1,2 @@
-
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
deleted file mode 100644
index 31ca7dd599..0000000000
--- a/.storybook/preview-head.html
+++ /dev/null
@@ -1,22 +0,0 @@
-
diff --git a/.storybook/preview.js b/.storybook/preview.js
index b65382beba..74cdca4cc5 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -20,14 +20,7 @@ const SORT_ORDER = {
'Contributing',
'Code of Conduct'
],
- Advanced: [
- 'Static CSS',
- 'Base Components',
- 'Theme',
- 'Grid',
- 'Icons',
- 'Fonts'
- ],
+ Advanced: ['Static CSS', 'Base Components', 'Theme', 'Grid', 'Icons'],
Typography: ['Heading', 'SubHeading', 'Text'],
Layout: [],
Forms: [],
diff --git a/docs/advanced/fonts.story.mdx b/docs/advanced/fonts.story.mdx
deleted file mode 100644
index 2c40d139f0..0000000000
--- a/docs/advanced/fonts.story.mdx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Meta } from '../../.storybook/components';
-
-
-
-# Fonts
-
-## Defining the font stack
-
-The font stack can be configured as part of the theme. The default font stack is applied to the `body` and the mono font stack is applied to `pre` and `code` tags. The default values are:
-
-```js
-export const fontStack = {
- default: 'aktiv-grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI"',
- mono: 'Consolas, monaco, monospace'
-};
-```
-
-## Loading custom web fonts
-
-There are myriads of ways to load fonts on the web. You can choose between [FOIT](https://css-tricks.com/fout-foit-foft/), [FOUT](https://www.zachleat.com/web/comprehensive-webfonts/#fout-class) and [FOFT](https://www.zachleat.com/web/comprehensive-webfonts/#foft), each with several implementation techniques.
-
-Circuit UI does not enforce any approach. It is up to you to choose and implement your preferred one. Have a look at Zach Leatherman's [Comprehensive Guide to Font Loading Strategies](https://www.zachleat.com/web/comprehensive-webfonts/) for inspiration.
-
-The simplest strategy is the [unceremonious font-face](https://www.zachleat.com/web/comprehensive-webfonts/#font-face) with `preload` and `font-display`. This is the default approach recommended by [Google Fonts](https://fonts.google.com/). Here's how you can implement it with Circuit UI:
-
-1. Add the font-face(s) that you'd like to use to your global HTML `
`:
-
-```html
-
-
-```
-
-2. Update the font stack in your theme:
-
-```js
-export const fontStack = {
- regular: '"Lato", sans-serif';
-};
-```
-
-At SumUp, we like to use [FOFT, or FOUT with Two Stage Render](https://www.zachleat.com/web/comprehensive-webfonts/#foft) paired with [Critical FOFT with preload](https://www.zachleat.com/web/comprehensive-webfonts/#critical-foft-preload). When you opt for this approach, you will have to add some custom global styles. Here's how you can do this with Circuit UI:
-
-```jsx
-import { Global, css } from '@emotion/core';
-import { ThemeProvider } from 'emotion-theming';
-import { theme } from '@sumup/circuit-ui';
-
-const fontStyles = css`
- body {
- font-family: sans-serif;
- }
- body.fonts-loaded-initial {
- font-family: 'LatoInitial', sans-serif;
- }
- body.fonts-loaded-full {
- font-family: 'Lato', sans-serif;
- }
-`;
-
-export default function App() {
- return (
-
-
-