fix tailwind fonts in storybook

autogpt_platform/frontend/.storybook/main.ts

@@ -16,6 +16,16 @@ const config: StorybookConfig = {
     name: "@storybook/nextjs",
     options: {},
   },
-  staticDirs: ["../public"],
+  staticDirs: [
+    "../public",
+    {
+      from: "../node_modules/geist/dist/fonts/geist-sans",
+      to: "/fonts/geist-sans",
+    },
+    {
+      from: "../node_modules/geist/dist/fonts/geist-mono",
+      to: "/fonts/geist-mono",
+    },
+  ],
 };
 export default config;

autogpt_platform/frontend/.storybook/preview.tsx

@@ -1,9 +1,29 @@
 import React from "react";
 import type { Preview } from "@storybook/react";
 import { initialize, mswLoader } from "msw-storybook-addon";
+import { Inter, Poppins } from "next/font/google";
+import localFont from "next/font/local";
 import "../src/app/globals.css";
 import { Providers } from "../src/app/providers";
 
+const poppins = Poppins({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-poppins",
+});
+
+const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+
+const GeistSans = localFont({
+  src: "../fonts/geist-sans/Geist-Variable.woff2",
+  variable: "--font-geist-sans",
+});
+
+const GeistMono = localFont({
+  src: "../fonts/geist-mono/GeistMono-Variable.woff2",
+  variable: "--font-geist-mono",
+});
+
 // Initialize MSW
 initialize();
 
@@ -24,9 +44,13 @@ const preview: Preview = {
       const mockOptions = context.parameters.mockBackend || {};
 
       return (
-        <Providers mockClientProps={mockOptions}>
-          <Story />
-        </Providers>
+        <div
+          className={`${poppins.variable} ${inter.variable} ${GeistMono.variable} ${GeistSans.variable}`}
+        >
+          <Providers mockClientProps={mockOptions}>
+            <Story />
+          </Providers>
+        </div>
       );
     },
   ],