diff --git a/package.json b/package.json
index 77fa89b..4232a67 100644
--- a/package.json
+++ b/package.json
@@ -6,15 +6,17 @@
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
-    "build": "astro build && subfont -ir --no-fallbacks --silent --root dist",
+    "build": "astro build",
+    "subfont": "subfont -ir --no-fallbacks --silent --root dist",
     "preview": "astro preview"
   },
   "devDependencies": {
-    "@astrojs/image": "^0.3.3",
+    "@astrojs/image": "^0.7.0",
     "@astrojs/partytown": "^1.0.0",
     "@astrojs/rss": "^1.0.0",
     "@astrojs/sitemap": "^1.0.0",
     "@astrojs/tailwind": "^1.0.0",
+    "@fontsource/inter": "^4.5.12",
     "@tailwindcss/typography": "^0.5.4",
     "astro": "^1.0.0",
     "astro-icon": "^0.7.3",
diff --git a/src/components/atoms/Fonts.astro b/src/components/atoms/Fonts.astro
index 0de8a82..adb227f 100644
--- a/src/components/atoms/Fonts.astro
+++ b/src/components/atoms/Fonts.astro
@@ -1,7 +1,5 @@
 ---
+import "@fontsource/inter/variable.css"
 ---
 
-<!-- Google Fonts -->
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet" />
+<!-- Or Google Fonts -->
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index c9f494b..6dc0f05 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -10,7 +10,7 @@ module.exports = {
         secondary: colors.pink,
       },
       fontFamily: {
-        sans: ["'Inter'", ...defaultTheme.fontFamily.sans],
+        sans: ["'InterVariable'", ...defaultTheme.fontFamily.sans],
       },
     },
   },