diff --git a/Groceries/Components/Layout.razor b/Groceries/Components/Layout.razor
index c9feba0..1f08170 100644
--- a/Groceries/Components/Layout.razor
+++ b/Groceries/Components/Layout.razor
@@ -9,6 +9,7 @@
     <meta name="view-transition" content="same-origin" />
     <meta name="turbo-prefetch" content="false" />
 
+    <link rel="stylesheet" type="text/css" href="@Assets["lib/inter/index.css"]" data-turbo-track="reload" />
     <link rel="stylesheet" type="text/css" href="@Assets["css/main.css"]" data-turbo-track="reload" />
 
     <ImportMap />
diff --git a/Groceries/libman.json b/Groceries/libman.json
index a226e90..a4e3b9a 100644
--- a/Groceries/libman.json
+++ b/Groceries/libman.json
@@ -2,6 +2,10 @@
     "version": "1.0",
     "defaultProvider": "unpkg",
     "libraries": [
+        {
+            "library": "@fontsource-variable/inter@5.1.0",
+            "destination": "wwwroot/lib/inter/"
+        },
         {
             "library": "@hotwired/turbo@8.0.4",
             "destination": "wwwroot/lib/hotwired/turbo/"
diff --git a/Groceries/wwwroot/css/main.css b/Groceries/wwwroot/css/main.css
index 8fa2398..f57a0f0 100644
--- a/Groceries/wwwroot/css/main.css
+++ b/Groceries/wwwroot/css/main.css
@@ -1,16 +1,8 @@
-@import url("https://rsms.me/inter/inter.css");
-
 :root {
-    font-family: "Inter", sans-serif;
+    font-family: "Inter Variable", sans-serif;
     color-scheme: light;
 }
 
-@supports (font-variation-settings: normal) {
-    :root {
-        font-family: "Inter var", sans-serif;
-    }
-}
-
 * {
     margin: 0;
     padding: 0;