diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 17a0c06f..e9550328 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,10 +1,60 @@
-<link rel="preload" href="/fonts/gk-variable.woff2" as="font" type="font/woff2" crossorigin />
+<link rel="preload" href="https://siero-img.s3-us-west-2.amazonaws.com/fonts/437fb160c86d1771.woff2" as="font" type="font/woff2" crossorigin />
+<link rel="preload" href="https://siero-img.s3-us-west-2.amazonaws.com/fonts/a9a1343791e012e7.woff2" as="font" type="font/woff2" crossorigin />
 <style>
   @font-face {
-    font-family: 'Goalking';
-    src: url('/fonts/gk-variable.woff2') format('woff2-variations');
-    font-weight: 100 900;
+    font-family: 'AGrot';
+    src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/437fb160c86d1771.woff2') format('woff2');
+    font-weight: 400;
     font-style: normal;
     font-display: swap;
   }
+  @font-face {
+    font-family: 'AGrot';
+    src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/90e2044c61d1d575.woff2') format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'AGrot';
+    src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/db6054d73906f6d1.woff2') format('woff2');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'AGrot';
+    src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/54cf3d47648cbde4.woff2') format('woff2');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'AGrot';
+    src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/a9a1343791e012e7.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'AGrot';
+    src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/0137ea08b8d14fae.woff2') format('woff2');
+    font-weight: 700;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'AGrot';
+    src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/83b98eb4efef82d6.woff2') format('woff2');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'AGrot';
+    src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/8fd873f2349d20e6.woff2') format('woff2');
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+  }
 </style>
diff --git a/src/stories/foundations/Typography.mdx b/src/stories/foundations/Typography.mdx
index 2dbf1aa2..af7cda1f 100644
--- a/src/stories/foundations/Typography.mdx
+++ b/src/stories/foundations/Typography.mdx
@@ -4,15 +4,15 @@ import { Meta, Typeset } from '@storybook/addon-docs/blocks';
 
 # Typography
 
-Hensei uses the **Goalking** variable font as its primary typeface, with system fonts as fallbacks.
+Hensei uses the **AGrot** font family as its primary typeface, with system fonts as fallbacks.
 
 ## Font Family
 
 ```css
---font-family: 'Goalking', system-ui, sans-serif;
+--font-family: 'AGrot', system-ui, sans-serif;
 ```
 
-The Goalking font is a variable font supporting weights from 100-900, loaded from `/fonts/gk-variable.woff2`.
+The AGrot font family supports weights 400, 500, 700, and 900 (with italic variants), loaded from AWS S3.
 
 ## Font Weights
 
@@ -20,7 +20,8 @@ The Goalking font is a variable font supporting weights from 100-900, loaded fro
 |--------|-------|-------|
 | Normal | 400 | Body text, descriptions |
 | Medium | 500 | Labels, emphasized text |
-| Bold | 600 | Headings, important text |
+| Bold | 700 | Headings, important text |
+| Black | 900 | Extra emphasis |
 
 ## Font Sizes
 
@@ -39,7 +40,7 @@ Our font sizes use `rem` units based on a 10px base (62.5% of 16px), making calc
   ]}
   fontWeight={400}
   sampleText="The quick brown fox jumps over the lazy dog"
-  fontFamily="'Goalking', system-ui, sans-serif"
+  fontFamily="'AGrot', system-ui, sans-serif"
 />
 
 ### Size Scale
@@ -61,7 +62,8 @@ Our font sizes use `rem` units based on a 10px base (62.5% of 16px), making calc
 <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', margin: '24px 0' }}>
   <div style={{ fontSize: '18px', fontWeight: 400 }}>Normal (400): The quick brown fox jumps over the lazy dog</div>
   <div style={{ fontSize: '18px', fontWeight: 500 }}>Medium (500): The quick brown fox jumps over the lazy dog</div>
-  <div style={{ fontSize: '18px', fontWeight: 600 }}>Bold (600): The quick brown fox jumps over the lazy dog</div>
+  <div style={{ fontSize: '18px', fontWeight: 700 }}>Bold (700): The quick brown fox jumps over the lazy dog</div>
+  <div style={{ fontSize: '18px', fontWeight: 900 }}>Black (900): The quick brown fox jumps over the lazy dog</div>
 </div>
 
 ## Usage in SCSS