diff --git a/public/fonts/SpaceGrotesk-Bold.woff2 b/public/fonts/SpaceGrotesk-Bold.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..b06c814beb37e48a9c949a30c14956792a1bdd01
Binary files /dev/null and b/public/fonts/SpaceGrotesk-Bold.woff2 differ
diff --git a/public/fonts/SpaceGrotesk-Light.woff2 b/public/fonts/SpaceGrotesk-Light.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..233c45b62fea3d535feb24e07b988271db40d875
Binary files /dev/null and b/public/fonts/SpaceGrotesk-Light.woff2 differ
diff --git a/public/fonts/SpaceGrotesk-Medium.woff2 b/public/fonts/SpaceGrotesk-Medium.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..c06b01905cdc01530656389fb9747cbf785d8bf7
Binary files /dev/null and b/public/fonts/SpaceGrotesk-Medium.woff2 differ
diff --git a/public/fonts/SpaceGrotesk-Regular.woff2 b/public/fonts/SpaceGrotesk-Regular.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..b72d5f4a6c37919cdb2a9fc50d1ea79929e84c43
Binary files /dev/null and b/public/fonts/SpaceGrotesk-Regular.woff2 differ
diff --git a/public/fonts/SpaceGrotesk-SemiBold.woff2 b/public/fonts/SpaceGrotesk-SemiBold.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..e8c116104c7b6c1ab0052a50217afb3b384d51dd
Binary files /dev/null and b/public/fonts/SpaceGrotesk-SemiBold.woff2 differ
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index b5c61c956711f981a41e95f7fcf0038436cfbb22..b4022986301e7ed9c0e0dca798835da623f55961 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -1,3 +1,50 @@
 @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
diff --git a/tailwind.config.js b/tailwind.config.js
index 3390e2b045e1b6276b0c47cf4054508fed5e002f..6dd9d759964821cc9a5b715fb866bd6073797b17 100644
--- a/tailwind.config.js
+++ b/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: {
diff --git a/theme.config.tsx b/theme.config.tsx
index 81705a018fb3bad4517fceda6582f1dc0dbb4fa1..3b4096071ea137f7b3426aad9a74ed828f3094bb 100644
--- a/theme.config.tsx
+++ b/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>