diff --git a/site/pages/_document.tsx b/site/pages/_document.tsx
index 1f983ce619..4582faa022 100644
--- a/site/pages/_document.tsx
+++ b/site/pages/_document.tsx
@@ -9,9 +9,11 @@ import {
   compileTheme,
   newskitLightTheme,
   getSizingCssFromTheme,
+  createFontFacesForTheme,
 } from 'newskit';
 import Helmet from 'react-helmet';
 import {HTMLMeta} from '../components/html-meta';
+import {docsThemeLight, fontPaths} from 'theme/doc-theme';
 
 // Is added so relative paths work when we are on a sub dir e.g. s-3.com/ppdsc-123-foo/
 const baseHref =
@@ -75,187 +77,7 @@ export default class MyDocument extends Document {
                 })({theme: compiledNewskitLightTheme})};
               }
 
-              @font-face {
-                font-family: 'DM Sans';
-                src: url('static/fonts/dmsans-regular-webfont.woff2')
-                    format('woff2'),
-                  url('static/fonts/dmsans-regular-webfont.woff') format('woff');
-                font-style: normal;
-                font-weight: 400;
-                font-display: swap;
-              }
-              @font-face {
-                font-family: 'DM Sans';
-                src: url('static/fonts/dmsans-italic-webfont.woff2')
-                    format('woff2'),
-                  url('static/fonts/dmsans-italic-webfont.woff') format('woff');
-                font-style: italic;
-                font-weight: 400;
-                font-display: swap;
-              }
-              @font-face {
-                font-family: 'DM Sans';
-                src: url('static/fonts/dmsans-medium-webfont.woff2')
-                    format('woff2'),
-                  url('static/fonts/dmsans-medium-webfont.woff') format('woff');
-                font-style: normal;
-                font-weight: 500;
-                font-display: swap;
-              }
-              @font-face {
-                font-family: 'DM Sans';
-                src: url('static/fonts/dmsans-mediumitalic-webfont.woff2')
-                    format('woff2'),
-                  url('static/fonts/dmsans-mediumitalic-webfont.woff')
-                    format('woff');
-                font-style: italic;
-                font-weight: 500;
-                font-display: swap;
-              }
-              @font-face {
-                font-family: 'DM Sans';
-                src: url('static/fonts/dmsans-bold-webfont.woff2')
-                    format('woff2'),
-                  url('static/fonts/dmsans-bold-webfont.woff') format('woff');
-                font-style: normal;
-                font-weight: 700;
-                font-display: swap;
-              }
-              @font-face {
-                font-family: 'DM Sans';
-                src: url('static/fonts/dmsans-bolditalic-webfont.woff2')
-                    format('woff2'),
-                  url('static/fonts/dmsans-bolditalic-webfont.woff')
-                    format('woff');
-                font-style: italic;
-                font-weight: 700;
-                font-display: swap;
-              }
-
-              @font-face {
-                font-family: 'Poppins';
-                src: url('static/fonts/poppins-bold-webfont.woff2')
-                    format('woff2'),
-                  url('static/fonts/poppins-bold-webfont.woff') format('woff');
-                font-weight: 700;
-                font-style: normal;
-              }
-
-              @font-face {
-                font-family: 'Poppins';
-                src: url('static/fonts/poppins-bolditalic-webfont.woff2')
-                    format('woff2'),
-                  url('static/fonts/poppins-bolditalic-webfont.woff')
-                    format('woff');
-                font-weight: normal;
-                font-style: italic;
-              }
-
-              @font-face {
-                font-family: 'Poppins';
-                src: url('static/fonts/poppins-extrabold-webfont.woff2')
-                    format('woff2'),
-                  url('static/fonts/poppins-extrabold-webfont.woff')
-                    format('woff');
-                font-weight: 800;
-                font-style: normal;
-              }
-
-              @font-face {
-                font-family: 'Poppins';
-                src: url('static/fonts/poppins-extrabolditalic-webfont.woff2')
-                    format('woff2'),
-                  url('static/fonts/poppins-extrabolditalic-webfont.woff')
-                    format('woff');
-                font-weight: 800;
-                font-style: italic;
-              }
-
-              @font-face {
-                font-family: 'Poppins';
-                src: url('static/fonts/poppins-italic-webfont.woff2')
-                    format('woff2'),
-                  url('static/fonts/poppins-italic-webfont.woff') format('woff');
-                font-weight: 400;
-                font-style: italic;
-              }
-
-              @font-face {
-                font-family: 'Poppins';
-                src: url('static/fonts/poppins-light-webfont.woff2')
-                    format('woff2'),
-                  url('static/fonts/poppins-light-webfont.woff') format('woff');
-                font-weight: 300;
-                font-style: normal;
-              }
-
-              @font-face {
-                font-family: 'Poppins';
-                src: url('static/fonts/poppins-lightitalic-webfont.woff2')
-                    format('woff2'),
-                  url('static/fonts/poppins-lightitalic-webfont.woff')
-                    format('woff');
-                font-weight: 300;
-                font-style: italic;
-              }
-
-              @font-face {
-                font-family: 'Poppins';
-                src: url('static/fonts/poppins-medium-webfont.woff2')
-                    format('woff2'),
-                  url('static/fonts/poppins-medium-webfont.woff') format('woff');
-                font-weight: 500;
-                font-style: normal;
-              }
-
-              @font-face {
-                font-family: 'Poppins';
-                src: url('static/fonts/poppins-mediumitalic-webfont.woff2')
-                    format('woff2'),
-                  url('static/fonts/poppins-mediumitalic-webfont.woff')
-                    format('woff');
-                font-weight: 500;
-                font-style: italic;
-              }
-
-              @font-face {
-                font-family: 'Poppins';
-                src: url('static/fonts/poppins-regular-webfont.woff2')
-                    format('woff2'),
-                  url('static/fonts/poppins-regular-webfont.woff')
-                    format('woff');
-                font-weight: 400;
-                font-style: normal;
-              }
-
-              @font-face {
-                font-family: 'Poppins';
-                src: url('static/fonts/poppins-semibold-webfont.woff2')
-                    format('woff2'),
-                  url('static/fonts/poppins-semibold-webfont.woff')
-                    format('woff');
-                font-weight: 600;
-                font-style: normal;
-              }
-
-              @font-face {
-                font-family: 'Poppins';
-                src: url('static/fonts/poppins-semibolditalic-webfont.woff2')
-                    format('woff2'),
-                  url('static/fonts/poppins-semibolditalic-webfont.woff')
-                    format('woff');
-                font-weight: 600;
-                font-style: italic;
-              }
-
-              @font-face {
-                font-family: 'DM Mono';
-                src: url('static/fonts/dmmono-medium.woff2') format('woff2'),
-                  url('static/fonts/dmmono-medium.woff') format('woff');
-                font-style: normal;
-                font-weight: 500;
-                font-display: swap;
-              }
+              ${createFontFacesForTheme(docsThemeLight, fontPaths)}
             `}
           />
           {isSiteEnvProduction && (
diff --git a/site/theme/doc-theme.ts b/site/theme/doc-theme.ts
index a4d6d99a34..9c3db0c91e 100644
--- a/site/theme/doc-theme.ts
+++ b/site/theme/doc-theme.ts
@@ -17,6 +17,41 @@ import {componentDefaults} from './component-defaults';
 // Docs site uses the same fonts for each theme - so we just use the same from Light theme as the 'default'
 const {fonts} = documentationLight;
 
+//This will be exported by default through the publisher,
+// added in as an example for spike purposes
+Object.assign(documentationLight, {
+  fontFaces: {
+    'Poppins-Bold': {
+      fontFamily: 'Poppins',
+      fontWeight: 700,
+    },
+    'Poppins-Medium': {
+      fontFamily: 'Poppins',
+      fontWeight: 500,
+    },
+    'DM Sans-Regular': {
+      fontFamily: 'DM Sans',
+      fontWeight: 400,
+    },
+    'Poppins-Italic': {
+      fontFamily: 'Poppins',
+      fontWeight: 'italic',
+    },
+    'DM Sans-Medium': {
+      fontFamily: 'DM Sans',
+      fontWeight: 500,
+    },
+    'Poppins-SemiBold': {
+      fontFamily: 'Poppins',
+      fontWeight: 600,
+    },
+    'DM Mono-Regular': {
+      fontFamily: 'DM Mono',
+      fontWeight: 400,
+    },
+  },
+});
+
 Object.assign(fonts.fontFamily010, {
   fontMetrics: {
     fontWeight010: {
@@ -126,3 +161,73 @@ export const patternsThemeDark = createTheme({
     fonts,
   },
 });
+
+// These are all the fonts we currently use in the docs site
+export const fontPaths = {
+  'DM Sans': `url('static/fonts/dmsans-regular-webfont.woff2') format('woff2'),
+   url('static/fonts/dmsans-regular-webfont.woff') format('woff')`,
+  'DM Sans-Italic': `url('static/fonts/dmsans-italic-webfont.woff2')
+  format('woff2'),
+url('static/fonts/dmsans-italic-webfont.woff') format('woff');`,
+  'DM Sans-Medium': `url('static/fonts/dmsans-medium-webfont.woff2')
+  format('woff2'),
+url('static/fonts/dmsans-medium-webfont.woff') format('woff');`,
+  'DM Sans-MediumItalic': `url('static/fonts/dmsans-mediumitalic-webfont.woff2')
+  format('woff2'),
+url('static/fonts/dmsans-mediumitalic-webfont.woff')
+  format('woff');`,
+  'DM Sans-Bold': `url('static/fonts/dmsans-bold-webfont.woff2')
+  format('woff2'),
+url('static/fonts/dmsans-bold-webfont.woff') format('woff');`,
+  'DM Sans-BoldItalic': `url('static/fonts/dmsans-bolditalic-webfont.woff2')
+  format('woff2'),
+url('static/fonts/dmsans-bolditalic-webfont.woff')
+  format('woff');`,
+  'Poppins-Bold': `url('static/fonts/poppins-bold-webfont.woff2')
+  format('woff2'),
+url('static/fonts/poppins-bold-webfont.woff') format('woff');`,
+  'Poppins-BoldItalic': `url('static/fonts/poppins-bolditalic-webfont.woff2')
+  format('woff2'),
+url('static/fonts/poppins-bolditalic-webfont.woff')
+  format('woff');`,
+  'Poppins-ExtraBold': `url('static/fonts/poppins-extrabold-webfont.woff2')
+  format('woff2'),
+url('static/fonts/poppins-extrabold-webfont.woff')
+  format('woff');`,
+  'Poppins-ExtraBoldItalic': `url('static/fonts/poppins-extrabolditalic-webfont.woff2')
+  format('woff2'),
+url('static/fonts/poppins-extrabolditalic-webfont.woff')
+  format('woff');`,
+  'Poppins-italic': `url('static/fonts/poppins-italic-webfont.woff2')
+  format('woff2'),
+url('static/fonts/poppins-italic-webfont.woff') format('woff');`,
+  'Poppins-Light': `url('static/fonts/poppins-light-webfont.woff2')
+  format('woff2'),
+url('static/fonts/poppins-light-webfont.woff') format('woff');`,
+  'Poppins-LightItalic': `url('static/fonts/poppins-lightitalic-webfont.woff2')
+  format('woff2'),
+url('static/fonts/poppins-lightitalic-webfont.woff')
+  format('woff');`,
+  'Poppins-Medium': `url('static/fonts/poppins-medium-webfont.woff2')
+  format('woff2'),
+url('static/fonts/poppins-medium-webfont.woff') format('woff');`,
+  'Poppins-MediumItalic': `url('static/fonts/poppins-mediumitalic-webfont.woff2')
+  format('woff2'),
+url('static/fonts/poppins-mediumitalic-webfont.woff')
+  format('woff');`,
+  'Poppins-Regular': `url('static/fonts/poppins-regular-webfont.woff2')
+  format('woff2'),
+url('static/fonts/poppins-regular-webfont.woff')
+  format('woff');`,
+  'Poppins-SemiBold': `url('static/fonts/poppins-semibold-webfont.woff2')
+  format('woff2'),
+url('static/fonts/poppins-semibold-webfont.woff')
+  format('woff');`,
+  'Poppins-SemiBoldItalic': `url('static/fonts/poppins-semibolditalic-webfont.woff2')
+  format('woff2'),
+url('static/fonts/poppins-semibolditalic-webfont.woff')
+  format('woff');`,
+  'DM Mono': `url('static/fonts/dmmono-medium.woff2') format('woff2'),
+url('static/fonts/dmmono-medium.woff') format('woff');,
+`,
+};
diff --git a/src/theme/creator.ts b/src/theme/creator.ts
index 63dfb16f51..e88e19a3d6 100644
--- a/src/theme/creator.ts
+++ b/src/theme/creator.ts
@@ -126,3 +126,37 @@ export const createTheme = ({
     {name, themeVersion: 1},
   );
 };
+
+type FontPaths = {
+  [key: string]: string;
+};
+export const createFontFacesForTheme = (
+  theme: UncompiledTheme,
+  fontPaths: FontPaths,
+) => {
+  const {fontFaces} = theme;
+
+  let fontFaceDefinitions = '';
+
+  fontFaces &&
+    Object.keys(fontFaces).forEach(fontFace => {
+      const {fontFamily, fontWeight, fontStyle, fontStretch} = fontFaces[
+        fontFace
+      ];
+
+      const src = fontPaths[fontFace];
+
+      const properties = [`src: ${src}`, `font-display: swap`];
+      fontWeight && properties.push(`font-weight: ${fontWeight}`);
+      fontStyle && properties.push(`font-style: ${fontStyle}`);
+      fontStretch && properties.push(`font-stretch: ${fontStretch}`);
+
+      const fontFaceString = `@font-face {
+      font-family: ${fontFamily};
+      ${properties.join(';\n')}
+    }`;
+
+      fontFaceDefinitions = fontFaceDefinitions + fontFaceString + '\n';
+    });
+  return fontFaceDefinitions.trim();
+};
diff --git a/src/theme/types.ts b/src/theme/types.ts
index 6073dcbf54..8d5a60f704 100644
--- a/src/theme/types.ts
+++ b/src/theme/types.ts
@@ -7,6 +7,22 @@ export enum Devices {
   iPadPro = 'iPad Pro',
 }
 
+export interface PartialFontFace {
+  fontFamily: string;
+  fontWeight: string | number;
+  fontStyle?: 'normal' | 'italic' | 'oblique';
+  fontStretch?:
+    | 'ultra-condensed'
+    | 'extra-condensed'
+    | 'condensed'
+    | 'semi-condensed'
+    | 'normal'
+    | 'semi-expanded'
+    | 'expanded'
+    | 'extra-expanded'
+    | 'ultra-expanded';
+}
+
 export interface ThemeBase {
   // foundations
   motions: Record<string, string>;
@@ -16,6 +32,7 @@ export interface ThemeBase {
   colors: Record<string, string>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   fonts: Record<string, any>;
+  fontFaces?: Record<string, PartialFontFace>;
   overlays: Record<string, string>;
   shadows: Record<string, string>;
   sizing: Record<string, string>;