diff --git a/apps/docs/app/playground/page.tsx b/apps/docs/app/playground/page.tsx
index daf1dd00c..74b2bbe97 100644
--- a/apps/docs/app/playground/page.tsx
+++ b/apps/docs/app/playground/page.tsx
@@ -5,13 +5,22 @@ export default function PlaygroundPage() {
     return (
         <main>
             <Title level={1}>Playground Links</Title>
-            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: "0.75rem", marginBlock: "2rem" }}>
+            <ul style={{
+                listStyle: "none",
+                display: "flex",
+                flexDirection: "column",
+                gap: "0.75rem",
+                marginBlock: "2rem"
+            }}>
                 <li>
                     <Link href="/playground/codeblock">Codeblock →</Link>
                 </li>
                 <li>
                     <Link href="/playground/headings-link">Heading link →</Link>
                 </li>
+                <li>
+                    <Link href="/playground/typography">Typography →</Link>
+                </li>
             </ul>
         </main>
     );
diff --git a/apps/docs/app/playground/typography/page.tsx b/apps/docs/app/playground/typography/page.tsx
new file mode 100644
index 000000000..105e9889f
--- /dev/null
+++ b/apps/docs/app/playground/typography/page.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import "./typo.css";
+
+export default function CodeBlockPage() {
+    return <main data-font="cdn" className="hd-wrapper">
+        <h1>Building the future with Hopper: Our Design System</h1>
+        <h2>Building the future with Hopper: Our Design System</h2>
+        <h3>Building the future with Hopper: Our Design System</h3>
+        <h4>Building the future with Hopper: Our Design System</h4>
+        <h5>Building the future with Hopper: Our Design System</h5>
+        <p>
+            Hopper, our Design System, is the cornerstone of our development approach. Designed to deliver a seamless
+            and efficient user experience, Hopper provides a comprehensive library of consistent components, icons and
+            styles. By integrating Hopper into our projects, we are committed to maintaining a unified visual design,
+            optimal accessibility and uncompromising scalability. Building with Hopper means building with consistency,
+            simplicity and excellence.
+        </p>
+    </main>;
+}
diff --git a/apps/docs/app/playground/typography/typo.css b/apps/docs/app/playground/typography/typo.css
new file mode 100644
index 000000000..f20522b6d
--- /dev/null
+++ b/apps/docs/app/playground/typography/typo.css
@@ -0,0 +1,17 @@
+@font-face {
+    font-family: "ABC Favorit";
+    font-style: normal;
+    font-weight: 410;
+    src: url("https://assets.workleap-dev.com/hopper/fonts/ABCFavorit-Regular.otf") format("opentype");
+    font-display: fallback;
+}
+
+
+[data-font="cdn"] {
+    font-family: "ABC Favorit", sans-serif;
+    font-weight: 410;
+    font-style: normal;
+    color: #1c1b1b;
+    line-height: 1.5;
+}
+