diff --git a/src/styles/fonts.css b/src/styles/fonts.css
new file mode 100644
index 0000000..6ba2c95
--- /dev/null
+++ b/src/styles/fonts.css
@@ -0,0 +1,33 @@
+/* Local Fonts - Archivo */
+@font-face {
+  font-family: 'Archivo';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: normal;
+  font-display: swap;
+  src: url('./fonts/archivo-400.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Archivo';
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: normal;
+  font-display: swap;
+  src: url('./fonts/archivo-700.ttf') format('truetype');
+}
+
+/* Local Fonts - Space Grotesk */
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./fonts/space-grotesk-400.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./fonts/space-grotesk-700.ttf') format('truetype');
+}
diff --git a/src/styles/fonts/archivo-400.ttf b/src/styles/fonts/archivo-400.ttf
new file mode 100644
index 0000000..757e07f
Binary files /dev/null and b/src/styles/fonts/archivo-400.ttf differ
diff --git a/src/styles/fonts/archivo-700.ttf b/src/styles/fonts/archivo-700.ttf
new file mode 100644
index 0000000..8893a0d
Binary files /dev/null and b/src/styles/fonts/archivo-700.ttf differ
diff --git a/src/styles/fonts/space-grotesk-400.ttf b/src/styles/fonts/space-grotesk-400.ttf
new file mode 100644
index 0000000..576f9b5
Binary files /dev/null and b/src/styles/fonts/space-grotesk-400.ttf differ
diff --git a/src/styles/fonts/space-grotesk-700.ttf b/src/styles/fonts/space-grotesk-700.ttf
new file mode 100644
index 0000000..f4f8002
Binary files /dev/null and b/src/styles/fonts/space-grotesk-700.ttf differ
diff --git a/src/styles/global.css b/src/styles/global.css
index 936ca3b..45066ea 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,6 +1,6 @@
+@import "./fonts.css";
 @import "tailwindcss";
 @import "tw-animate-css";
-@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
 @plugin "@tailwindcss/typography";
 
 /* Blog List Component Styles */