Changes headlines to space grotesk font

Signed-off-by: Sebastian Kawelke <kawelkesebastian@gmail.com>

src/styles/globals.scss

 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+    @font-face {
+        font-family: 'Space Grotesk';
+        font-style: normal;
+        font-weight: 300;
+        src: url(/fonts/SpaceGrotesk-Light.woff2) format('woff2');
+    }
+    @font-face {
+        font-family: 'Space Grotesk';
+        font-style: normal;
+        font-weight: 400;
+        src: url(/fonts/SpaceGrotesk-Regular.woff2) format('woff2');
+    }
+    @font-face {
+        font-family: 'Space Grotesk';
+        font-style: normal;
+        font-weight: 500;
+        src: url(/fonts/SpaceGrotesk-Medium.woff2) format('woff2');
+    }
+    @font-face {
+        font-family: 'Space Grotesk';
+        font-style: normal;
+        font-weight: 600;
+        src: url(/fonts/SpaceGrotesk-SemiBold.woff2) format('woff2');
+    }
+    @font-face {
+        font-family: 'Space Grotesk';
+        font-style: normal;
+        font-weight: 700;
+        src: url(/fonts/SpaceGrotesk-Bold.woff2) format('woff2');
+    }
+}
+
+// Change H1 font family
+
+@layer components {
+    h1 {
+        font-family: 'Space Grotesk', sans-serif;
+    }
+    h2 {
+        font-family: 'Space Grotesk', sans-serif;
+    }
+    h3 {
+        font-family: 'Space Grotesk', sans-serif;
+    }
+}
\ No newline at end of file

tailwind.config.js

@@ -6,7 +6,10 @@ module.exports = {
         './src/app/**/*.{js,ts,jsx,tsx,md,mdx}',
         './theme.config.tsx'
     ],
-    theme: {   
+    theme: {
+        fontFamily: {
+            'space-grotesk': ['Space Grotesk', 'sans-serif'],
+        },
         extend: {
             colors: {
                 zendis: {

theme.config.tsx

@@ -47,7 +47,7 @@ const config: DocsThemeConfig = {
                 className="h-12 w-auto"
             />
             <span>
-                <span className="text-xl font-bold text-black">
+                <span className="font-space-grotesk text-xl font-bold text-black">
                     Badge API Documentation
                 </span>
             </span>