diff --git a/build.washingtonpost.com/next.config.js b/build.washingtonpost.com/next.config.js
index 8e5ec1b9d..e67c89ead 100644
--- a/build.washingtonpost.com/next.config.js
+++ b/build.washingtonpost.com/next.config.js
@@ -105,4 +105,8 @@ module.exports = withBundleAnalyzer({
   env: {
     APP_ENV: "production",
   },
+  transpilePackages: [
+    "@washingtonpost/wpds-ui-kit",
+    "@washingtonpost/wpds-kitchen-sink",
+  ],
 });
diff --git a/build.washingtonpost.com/package.json b/build.washingtonpost.com/package.json
index d6ba24224..d95bfc1b3 100644
--- a/build.washingtonpost.com/package.json
+++ b/build.washingtonpost.com/package.json
@@ -21,7 +21,7 @@
     "@radix-ui/react-checkbox": "^1.0.0",
     "@radix-ui/react-collapsible": "^1.0.0",
     "@radix-ui/react-toggle-group": "^1.0.1",
-    "@stitches/react": "1.2.8",
+    "@stitches/react": "1.3.1-1",
     "@washingtonpost/front-end-utils": "0.5.17-alpha.1",
     "@washingtonpost/site-favicons": "0.3.4-alpha.1",
     "@washingtonpost/site-footer": "0.25.3-alpha.1",
diff --git a/build.washingtonpost.com/pages/_document.js b/build.washingtonpost.com/pages/_document.js
index bad66211d..b2d613f8e 100644
--- a/build.washingtonpost.com/pages/_document.js
+++ b/build.washingtonpost.com/pages/_document.js
@@ -42,43 +42,6 @@ export default function Document() {
           type="font/woff2"
           crossOrigin="anonymous"
         />
-        <style
-          dangerouslySetInnerHTML={{
-            __html: `@font-face {
-								font-family: Postoni;
-								font-weight: 700;
-								font-display: fallback;
-								src: url(https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniWide-Bold.woff2);
-								unicode-range: U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,
-								  U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f3-f5, U+fa, U+2009, U+2013, U+2014,
-								  U+2018, U+2019, U+201c, U+201d, U+2026;
-							  }
-							  @font-face {
-								font-family: Postoni;
-								font-weight: 300;
-								font-display: fallback;
-								src: url(https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniWide-Regular.woff2);
-							  }
-							  @font-face {
-								font-family: Franklin;
-								font-weight: 700;
-								font-display: fallback;
-								unicode-range: U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,
-								  U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f3-f5, U+fa, U+2009, U+2013, U+2014,
-								  U+2018, U+2019, U+201c, U+201d, U+2026;
-								src: url(https://www.washingtonpost.com/wp-stat/assets/fonts/ITC_Franklin-Bold.woff2);
-							  }
-							  @font-face {
-								font-family: Franklin;
-								font-weight: 300;
-								font-display: fallback;
-								src: url(https://www.washingtonpost.com/wp-stat/assets/fonts/ITC_Franklin-Light.woff2);
-								unicode-range: U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,
-								  U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f1, U+f3-f5, U+fa, U+2009, U+2013,
-								  U+2014, U+2018, U+2019, U+201c, U+201d, U+2026;
-							  }`,
-          }}
-        />
       </Head>
       <body>
         <noscript>
diff --git a/build.washingtonpost.com/pages/font-faces.js b/build.washingtonpost.com/pages/font-faces.js
new file mode 100644
index 000000000..a51bda3d1
--- /dev/null
+++ b/build.washingtonpost.com/pages/font-faces.js
@@ -0,0 +1,54 @@
+import React from "react";
+import { Box } from "@washingtonpost/wpds-ui-kit";
+import tokens from "@washingtonpost/wpds-ui-kit/src/theme/wpds.tokens.json";
+
+const FontFacePlayground = ({ stacks }) => {
+  return (
+    <Box
+      css={{
+        color: "$onBackground",
+        h1: {
+          fontSize: "$400",
+          fontFamily: "$headline",
+        },
+        h2: {
+          fontSize: "$200",
+          fontFamily: "$subhead",
+        },
+      }}
+    >
+      <h1>@font-faces</h1>
+      {Object.keys(stacks).map((stack) => (
+        <Box key={stack}>
+          <h2>{stack}</h2>
+          <Box
+            as="p"
+            css={{
+              fontFamily: `$${stack}`,
+              fontSize: "$400",
+            }}
+          >
+            The quick brown fox jumps over the lazy dog.
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export async function getStaticProps() {
+  const stacks = {
+    magazine: tokens.fonts.magazine,
+    headline: tokens.fonts.headline,
+    subhead: tokens.fonts.subhead,
+    meta: tokens.fonts.meta,
+  };
+
+  return {
+    props: {
+      stacks,
+    },
+  };
+}
+
+export default FontFacePlayground;
diff --git a/build.washingtonpost.com/tsconfig.json b/build.washingtonpost.com/tsconfig.json
index 4affcee40..ccb076a8f 100644
--- a/build.washingtonpost.com/tsconfig.json
+++ b/build.washingtonpost.com/tsconfig.json
@@ -3,7 +3,11 @@
     "baseUrl": ".",
     "paths": {
       "~/*": ["./*"],
-      "@/*": ["./*"]
+      "@/*": ["./*"],
+      "@washingtonpost/wpds-ui-kit": ["../packages/kit/src/index.ts"],
+      "@washingtonpost/wpds-kitchen-sink": [
+        "../packages/kitchen-sink/src/index.ts"
+      ]
     },
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
diff --git a/package-lock.json b/package-lock.json
index a1838c414..5d8c9849c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -322,7 +322,7 @@
         "@radix-ui/react-checkbox": "^1.0.0",
         "@radix-ui/react-collapsible": "^1.0.0",
         "@radix-ui/react-toggle-group": "^1.0.1",
-        "@stitches/react": "1.2.8",
+        "@stitches/react": "1.3.1-1",
         "@washingtonpost/front-end-utils": "0.5.17-alpha.1",
         "@washingtonpost/site-favicons": "0.3.4-alpha.1",
         "@washingtonpost/site-footer": "0.25.3-alpha.1",
@@ -374,6 +374,14 @@
         "tailwindcss": "^3.3.2"
       }
     },
+    "build.washingtonpost.com/node_modules/@stitches/react": {
+      "version": "1.3.1-1",
+      "resolved": "https://registry.npmjs.org/@stitches/react/-/react-1.3.1-1.tgz",
+      "integrity": "sha512-ErptbQehV25Da6LtZuM/51kGNK/UvlRY2da9IhhfXQ9h4bmf2f+lYFiJQ9j43O1kwYr6iYJIBRM47FEbsUWffw==",
+      "peerDependencies": {
+        "react": ">= 16.3.0"
+      }
+    },
     "build.washingtonpost.com/node_modules/@types/node": {
       "version": "17.0.45",
       "dev": true,
@@ -38380,7 +38388,7 @@
         "@radix-ui/react-use-controllable-state": "^1.0.1",
         "@reach/combobox": "^0.18.0",
         "@reach/popover": "^0.18.0",
-        "@stitches/react": "^1.2.8",
+        "@stitches/react": "1.3.1-1",
         "@washingtonpost/wpds-assets": "2.0.0",
         "match-sorter": "6.3.1",
         "nanoid": "^3.3.4",
@@ -38398,6 +38406,14 @@
         "react-dom": "^18.2.0"
       }
     },
+    "packages/kit/node_modules/@stitches/react": {
+      "version": "1.3.1-1",
+      "resolved": "https://registry.npmjs.org/@stitches/react/-/react-1.3.1-1.tgz",
+      "integrity": "sha512-ErptbQehV25Da6LtZuM/51kGNK/UvlRY2da9IhhfXQ9h4bmf2f+lYFiJQ9j43O1kwYr6iYJIBRM47FEbsUWffw==",
+      "peerDependencies": {
+        "react": ">= 16.3.0"
+      }
+    },
     "packages/kitchen-sink": {
       "name": "@washingtonpost/wpds-kitchen-sink",
       "version": "2.3.2",
diff --git a/packages/kit/package.json b/packages/kit/package.json
index 0a16f4155..2235b91a3 100644
--- a/packages/kit/package.json
+++ b/packages/kit/package.json
@@ -57,7 +57,7 @@
     "@radix-ui/react-use-controllable-state": "^1.0.1",
     "@reach/combobox": "^0.18.0",
     "@reach/popover": "^0.18.0",
-    "@stitches/react": "^1.2.8",
+    "@stitches/react": "1.3.1-1",
     "@washingtonpost/wpds-assets": "2.0.0",
     "match-sorter": "6.3.1",
     "nanoid": "^3.3.4",
diff --git a/packages/kit/src/theme/stitches.config.ts b/packages/kit/src/theme/stitches.config.ts
index 1261d7f03..b40c76c71 100644
--- a/packages/kit/src/theme/stitches.config.ts
+++ b/packages/kit/src/theme/stitches.config.ts
@@ -183,37 +183,90 @@ export const globalStyles = globalCss({
     {
       fontFamily: "Postoni",
       fontWeight: 700,
-      fontDisplay: "fallback",
+      fontDisplay: "swap",
       src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniWide-Bold.woff2)",
+      unicodeRange:
+        "U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f3-f5, U+fa, U+2009, U+2013, U+2014, U+2018, U+2019, U+201c, U+201d, U+2026",
     },
     {
       fontFamily: "Postoni",
       fontWeight: 300,
-      fontDisplay: "fallback",
+      fontDisplay: "swap",
       src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniWide-Regular.woff2)",
+      unicodeRange:
+        "U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f3-f5, U+fa, U+2009, U+2013, U+2014, U+2018, U+2019, U+201c, U+201d, U+2026",
+    },
+    {
+      fontFamily: "Franklin-fallback",
+      fontWeight: 300,
+      src: "local('Arial')",
+      sizeAdjust: "94.00%",
+      ascentOverride: "102.13%",
+      descentOverride: "25.53%",
+      lineGapOverride: "21.28%",
+    },
+    {
+      fontFamily: "Franklin-fallback",
+      fontWeight: 700,
+      src: "local('Arial Bold')",
+      sizeAdjust: "96.04%",
+      ascentOverride: "99.96%",
+      descentOverride: "24.99%",
+      lineGapOverride: "20.82%",
+    },
+    {
+      fontFamily: "Postoni-fallback",
+      fontWeight: 300,
+      src: "local(garamond)",
+      sizeAdjust: "100%",
+      ascentOverride: "normal",
+      descentOverride: "normal",
+      lineGapOverride: "normal",
+    },
+    {
+      fontFamily: "Postoni-fallback",
+      src: "local(garamond)",
+      sizeAdjust: "100%",
+      ascentOverride: "normal",
+      descentOverride: "normal",
+      lineGapOverride: "normal",
+    },
+    {
+      fontFamily: "PostoniDisplayMag-fallback",
+      src: "local(garamond)",
+      sizeAdjust: "200%",
+      ascentOverride: "99.96%",
+      descentOverride: "24.99%",
+      lineGapOverride: "20.82%",
     },
     {
       fontFamily: "Franklin",
       fontWeight: 700,
-      fontDisplay: "fallback",
+      fontDisplay: "swap",
       src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/ITC_Franklin-Bold.woff2)",
+      unicodeRange:
+        "U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f3-f5, U+fa, U+2009, U+2013, U+2014, U+2018, U+2019, U+201c, U+201d, U+2026",
     },
     {
       fontFamily: "Franklin",
       fontWeight: 300,
-      fontDisplay: "fallback",
+      fontDisplay: "swap",
       src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/ITC_Franklin-Light.woff2)",
+      unicodeRange:
+        "U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f3-f5, U+fa, U+2009, U+2013, U+2014, U+2018, U+2019, U+201c, U+201d, U+2026",
     },
     {
       fontFamily: "PostoniDisplayMag",
       fontWeight: 800,
-      fontDisplay: "fallback",
+      fontDisplay: "swap",
       src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniDisplayMag-Ultra.woff2)",
+      unicodeRange:
+        "U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f3-f5, U+fa, U+2009, U+2013, U+2014, U+2018, U+2019, U+201c, U+201d, U+2026",
     },
     {
       fontFamily: "PostoniDisplayMag",
       fontWeight: 800,
-      fontDisplay: "fallback",
+      fontDisplay: "swap",
       fontStyle: "italic",
       src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniDisplayMag-Ultra_Italic.woff2)",
     },
diff --git a/packages/kit/src/theme/tokens.ts b/packages/kit/src/theme/tokens.ts
index a47c1c18c..5da25d042 100644
--- a/packages/kit/src/theme/tokens.ts
+++ b/packages/kit/src/theme/tokens.ts
@@ -8,7 +8,7 @@
 			export const sizes={"100":"1rem","125":"1.25rem","150":"1.5rem","175":"1.75rem","200":"2rem","225":"2.25rem","250":"2.5rem","275":"2.75rem","300":"3rem","350":"3.5rem","400":"4rem","450":"4.5rem","500":"5rem","025":"0.25rem","050":"0.5rem","075":"0.75rem","087":"0.875rem"}
 			export const spaces={"100":"1rem","125":"1.25rem","150":"1.5rem","175":"1.75rem","200":"2rem","225":"2.25rem","250":"2.5rem","275":"2.75rem","300":"3rem","350":"3.5rem","400":"4rem","450":"4.5rem","500":"5rem","025":"0.25rem","050":"0.5rem","075":"0.75rem"}
 			export const radii={"100":"1rem","125":"1.25rem","150":"1.5rem","012":"0.125rem","025":"0.25rem","050":"0.5rem","075":"0.75rem","round":"9999px"}
-			export const fonts={"headline":"Postoni, garamond, serif","subhead":"Franklin, arial, sans-serif","body":"georgia, Times New Roman, serif","meta":"Franklin, arial, sans-serif","magazine":"PostoniDisplayMag, garamond, serif"}
+			export const fonts={"headline":"Postoni, Postoni-fallback, serif","subhead":"Franklin, Franklin-fallback, sans-serif","body":"georgia, Times New Roman, serif","meta":"Franklin, Franklin-fallback, sans-serif","magazine":"PostoniDisplayMag, PostoniDisplayMag-fallback, serif"}
 			export const fontSizes={"100":"1rem","112":"1.125rem","125":"1.25rem","150":"1.5rem","175":"1.75rem","200":"2rem","225":"2.25rem","250":"2.5rem","275":"2.75rem","300":"3rem","350":"3.5rem","400":"4rem","450":"4.5rem","500":"5rem","075":"0.75rem","087":"0.875rem"}
 			export const fontWeights={"light":300,"regular":400,"bold":700,"ultra":800}
 			export const lineHeights={"100":1,"110":1.1,"125":1.25,"150":1.5,"160":1.6,"175":1.75,"200":2,"240":2.4}
diff --git a/packages/kit/src/theme/wpds.tokens.json b/packages/kit/src/theme/wpds.tokens.json
index 608c92197..424352f84 100644
--- a/packages/kit/src/theme/wpds.tokens.json
+++ b/packages/kit/src/theme/wpds.tokens.json
@@ -2038,19 +2038,19 @@
   },
   "fonts": {
     "headline": {
-      "value": "Postoni, garamond, serif"
+      "value": "Postoni, Postoni-fallback, serif"
     },
     "subhead": {
-      "value": "Franklin, arial, sans-serif"
+      "value": "Franklin, Franklin-fallback, sans-serif"
     },
     "body": {
       "value": "georgia, Times New Roman, serif"
     },
     "meta": {
-      "value": "Franklin, arial, sans-serif"
+      "value": "Franklin, Franklin-fallback, sans-serif"
     },
     "magazine": {
-      "value": "PostoniDisplayMag, garamond, serif"
+      "value": "PostoniDisplayMag, PostoniDisplayMag-fallback, serif"
     }
   },
   "fontSize": {
