Quote Block storybook implemented

.storybook/preview.js

@@ -1,18 +1,27 @@
 import "../app/globals.css";
 
 // Import Google Fonts for Storybook
-import { Inter, Bricolage_Grotesque } from "next/font/google";
+import { Inter, Bricolage_Grotesque, Space_Grotesk } from "next/font/google";
 
 const inter = Inter({
   subsets: ["latin"],
-  weight: ["400", "500"],
+  weight: ["400", "500", "600", "700"],
   variable: "--font-inter",
+  display: "swap",
 });
 
 const bricolageGrotesque = Bricolage_Grotesque({
   subsets: ["latin"],
-  weight: ["400", "500"],
+  weight: ["400", "500", "700", "800"],
   variable: "--font-bricolage-grotesque",
+  display: "swap",
+});
+
+const spaceGrotesk = Space_Grotesk({
+  subsets: ["latin"],
+  weight: ["400", "500", "700"],
+  variable: "--font-space-grotesk",
+  display: "swap",
 });
 
 /** @type { import('@storybook/react').Preview } */
@@ -28,7 +37,9 @@ const preview = {
   },
   decorators: [
     (Story) => (
-      <div className={`${inter.variable} ${bricolageGrotesque.variable}`}>
+      <div
+        className={`${inter.variable} ${bricolageGrotesque.variable} ${spaceGrotesk.variable} font-sans`}
+      >
         <Story />
       </div>
     ),