From 722c6bcc1890f0b7f373ff11415f307bfb60bf2d Mon Sep 17 00:00:00 2001
From: Ubbe <hi@ubbe.dev>
Date: Wed, 4 Jun 2025 19:26:09 +0400
Subject: [PATCH] fix(storybook): make font load in Stories (#10081)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### Changes 🏗️

#### Before

<img width="800" alt="Screenshot 2025-06-03 at 16 54 36"
src="https://github.com/user-attachments/assets/2a69b69d-2b01-436e-aab3-8206485a001c"
/>

#### After

<img width="800" alt="Screenshot 2025-06-03 at 16 58 38"
src="https://github.com/user-attachments/assets/4daf41d4-42ce-4119-8e9f-b2b10b524cba"
/>



### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
- [ ] checkout this branch ( _we should have PR previews for the app and
Storybook_ )
  - [ ] `cd autogpt_platform/frontend`
  - [ ] `yarn storybook`
- [ ] the stories road with the right font ( Poppins ) not a serif one 😄

#### For configuration changes:
- [ ] ~~`.env.example` is updated or already compatible with my
changes~~
- [ ] ~~`docker-compose.yml` is updated or already compatible with my
changes~~
- [ ] ~~I have included a list of my configuration changes in the PR
description (under **Changes**)~~
---
 autogpt_platform/frontend/.storybook/main.ts  |  1 +
 .../.storybook/{preview.ts => preview.tsx}    |  9 ++++++
 autogpt_platform/frontend/src/app/layout.tsx  | 12 ++------
 .../frontend/src/components/styles/fonts.css  | 30 +++++++++++++++++++
 .../frontend/src/components/styles/fonts.ts   | 15 ++++++++++
 5 files changed, 57 insertions(+), 10 deletions(-)
 rename autogpt_platform/frontend/.storybook/{preview.ts => preview.tsx} (73%)
 create mode 100644 autogpt_platform/frontend/src/components/styles/fonts.css
 create mode 100644 autogpt_platform/frontend/src/components/styles/fonts.ts

diff --git a/autogpt_platform/frontend/.storybook/main.ts b/autogpt_platform/frontend/.storybook/main.ts
index 62db72c320..e75f6dbeef 100644
--- a/autogpt_platform/frontend/.storybook/main.ts
+++ b/autogpt_platform/frontend/.storybook/main.ts
@@ -18,4 +18,5 @@ const config: StorybookConfig = {
   },
   staticDirs: ["../public"],
 };
+
 export default config;
diff --git a/autogpt_platform/frontend/.storybook/preview.ts b/autogpt_platform/frontend/.storybook/preview.tsx
similarity index 73%
rename from autogpt_platform/frontend/.storybook/preview.ts
rename to autogpt_platform/frontend/.storybook/preview.tsx
index b8bef1a320..bc1640e845 100644
--- a/autogpt_platform/frontend/.storybook/preview.ts
+++ b/autogpt_platform/frontend/.storybook/preview.tsx
@@ -1,6 +1,8 @@
+import React from "react";
 import type { Preview } from "@storybook/react";
 import { initialize, mswLoader } from "msw-storybook-addon";
 import "../src/app/globals.css";
+import "../src/components/styles/fonts.css";
 
 // Initialize MSW
 initialize();
@@ -18,6 +20,13 @@ const preview: Preview = {
     },
   },
   loaders: [mswLoader],
+  decorators: [
+    (Story) => (
+      <>
+        <Story />
+      </>
+    ),
+  ],
 };
 
 export default preview;
diff --git a/autogpt_platform/frontend/src/app/layout.tsx b/autogpt_platform/frontend/src/app/layout.tsx
index 6579144c99..28e6c8b898 100644
--- a/autogpt_platform/frontend/src/app/layout.tsx
+++ b/autogpt_platform/frontend/src/app/layout.tsx
@@ -1,8 +1,6 @@
 import React, { Suspense } from "react";
 import type { Metadata } from "next";
-import { Poppins } from "next/font/google";
-import { GeistSans } from "geist/font/sans";
-import { GeistMono } from "geist/font/mono";
+import { fonts } from "@/components/styles/fonts";
 
 import "./globals.css";
 
@@ -11,12 +9,6 @@ import { Providers } from "@/app/providers";
 import TallyPopupSimple from "@/components/TallyPopup";
 import { GoogleAnalytics } from "@/components/analytics/google-analytics";
 
-const poppins = Poppins({
-  subsets: ["latin"],
-  weight: ["400", "500", "600", "700"],
-  variable: "--font-poppins",
-});
-
 export const metadata: Metadata = {
   title: "AutoGPT Platform",
   description: "Your one stop shop to creating AI Agents",
@@ -30,7 +22,7 @@ export default async function RootLayout({
   return (
     <html
       lang="en"
-      className={`${poppins.variable} ${GeistSans.variable} ${GeistMono.variable}`}
+      className={`${fonts.poppins.variable} ${fonts.sans.variable} ${fonts.mono.variable}`}
     >
       <head>
         <GoogleAnalytics
diff --git a/autogpt_platform/frontend/src/components/styles/fonts.css b/autogpt_platform/frontend/src/components/styles/fonts.css
new file mode 100644
index 0000000000..a0ab7bef44
--- /dev/null
+++ b/autogpt_platform/frontend/src/components/styles/fonts.css
@@ -0,0 +1,30 @@
+/* Google Fonts - Poppins (weights: 400, 500, 600, 700) */
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
+
+/* Local Geist Fonts from node_modules */
+@font-face {
+  font-family: "Geist";
+  src: url("../../../node_modules/geist/dist/fonts/geist-sans/Geist-Variable.woff2")
+    format("woff2-variations");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "GeistMono";
+  src: url("../../../node_modules/geist/dist/fonts/geist-mono/GeistMono-Variable.woff2")
+    format("woff2-variations");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* CSS Variables matching config from fonts.ts */
+:root {
+  --font-poppins: "Poppins", sans-serif;
+  --font-geist-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
+  --font-geist-mono:
+    "GeistMono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
+    Consolas, monospace;
+}
diff --git a/autogpt_platform/frontend/src/components/styles/fonts.ts b/autogpt_platform/frontend/src/components/styles/fonts.ts
new file mode 100644
index 0000000000..cb5461ea21
--- /dev/null
+++ b/autogpt_platform/frontend/src/components/styles/fonts.ts
@@ -0,0 +1,15 @@
+import { Poppins } from "next/font/google";
+import { GeistSans } from "geist/font/sans";
+import { GeistMono } from "geist/font/mono";
+
+const poppins = Poppins({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"] as const,
+  variable: "--font-poppins",
+});
+
+export const fonts = {
+  poppins,
+  sans: GeistSans,
+  mono: GeistMono,
+};