From a8f17cc6c7407fecc0e2764b5b63878b0d3ca55a Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Thu, 21 Aug 2025 20:10:46 -0600
Subject: [PATCH] Fix Storybook fonts

---
 .storybook/main.js          |  4 ----
 .storybook/preview.js       | 22 ++++++++++++++++++++++
 .storybook/preview.local.js | 22 ++++++++++++++++++++++
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index 7afbb5d..6e3993d 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -16,11 +16,7 @@ const config = {
     options: {},
   },
   staticDirs: ["../public"],
-  managerHead: (head) => `${head}<base href="/communityrulestorybook/">`,
-  previewHead: (head) => `${head}<base href="/communityrulestorybook/">`,
   async viteFinal(cfg) {
-    // IMPORTANT: Set base path for GitHub Pages sub-path hosting
-    cfg.base = "/communityrulestorybook/";
     // Ensure esbuild treats .js as JSX during dep pre-bundling
     cfg.optimizeDeps ??= {};
     cfg.optimizeDeps.esbuildOptions ??= {};
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 1fd25df..59394fb 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,5 +1,20 @@
 import "../app/globals.css";
 
+// Import Google Fonts for Storybook
+import { Inter, Bricolage_Grotesque } from "next/font/google";
+
+const inter = Inter({
+  subsets: ["latin"],
+  weight: ["400", "500"],
+  variable: "--font-inter",
+});
+
+const bricolageGrotesque = Bricolage_Grotesque({
+  subsets: ["latin"],
+  weight: ["400", "500"],
+  variable: "--font-bricolage-grotesque",
+});
+
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
@@ -11,6 +26,13 @@ const preview = {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <div className={`${inter.variable} ${bricolageGrotesque.variable}`}>
+        <Story />
+      </div>
+    ),
+  ],
 };
 
 export default preview;
diff --git a/.storybook/preview.local.js b/.storybook/preview.local.js
index 1fd25df..59394fb 100644
--- a/.storybook/preview.local.js
+++ b/.storybook/preview.local.js
@@ -1,5 +1,20 @@
 import "../app/globals.css";
 
+// Import Google Fonts for Storybook
+import { Inter, Bricolage_Grotesque } from "next/font/google";
+
+const inter = Inter({
+  subsets: ["latin"],
+  weight: ["400", "500"],
+  variable: "--font-inter",
+});
+
+const bricolageGrotesque = Bricolage_Grotesque({
+  subsets: ["latin"],
+  weight: ["400", "500"],
+  variable: "--font-bricolage-grotesque",
+});
+
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
@@ -11,6 +26,13 @@ const preview = {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <div className={`${inter.variable} ${bricolageGrotesque.variable}`}>
+        <Story />
+      </div>
+    ),
+  ],
 };
 
 export default preview;