Local font @fontsource/inter, subfont not default

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",

src/components/atoms/Fonts.astro

@@ -1,7 +1,5 @@
 ---
+import "@fontsource/inter/variable.css"
 ---
 
-<!-- Google Fonts -->
+<!-- Or 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" />

tailwind.config.cjs

@@ -10,7 +10,7 @@ module.exports = {
         secondary: colors.pink,
       },
       fontFamily: {
-        sans: ["'Inter'", ...defaultTheme.fontFamily.sans],
+        sans: ["'InterVariable'", ...defaultTheme.fontFamily.sans],
       },
     },
   },