diff --git a/.storybook/base.jsx b/.storybook/base.jsx
index 09902ea..518d659 100644
--- a/.storybook/base.jsx
+++ b/.storybook/base.jsx
@@ -1,4 +1,4 @@
-import "@fontsource/inter/variable.css";
+import "@fontsource-variable/inter";
 import { lightTheme, configClass, config, varsClass } from "../src";
 
 export const baseDecorator = (Story) => {
diff --git a/package-lock.json b/package-lock.json
index a344ba3..61bf92c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "Apache-2.0",
       "devDependencies": {
         "@babel/core": "^7.20.12",
-        "@fontsource/inter": "^4.5.12",
+        "@fontsource/inter": "^5.0.0",
         "@semantic-release/changelog": "^6.0.2",
         "@semantic-release/git": "^10.0.1",
         "@storybook/addon-actions": "^6.5.15",
@@ -2768,9 +2768,9 @@
       }
     },
     "node_modules/@fontsource/inter": {
-      "version": "4.5.14",
-      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.14.tgz",
-      "integrity": "sha512-JDC9AocdPLuGsASkvWw9hS5gtHE7K9dOwL98XLrk5yjYqxy4uVnScG58NUvFMJDVJRl/7c8Wnap6PEs+7Zvj1Q==",
+      "version": "5.0.18",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.0.18.tgz",
+      "integrity": "sha512-YCsoYPTcs713sI7tLtxaPrIhXAXvEetGg5Ry02ivA8qUOb3fQHojbK/X9HLD5OOKvFUNR2Ynkwb1kR1hVKQHpw==",
       "dev": true
     },
     "node_modules/@gar/promisify": {
@@ -30146,9 +30146,9 @@
       }
     },
     "@fontsource/inter": {
-      "version": "4.5.14",
-      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.14.tgz",
-      "integrity": "sha512-JDC9AocdPLuGsASkvWw9hS5gtHE7K9dOwL98XLrk5yjYqxy4uVnScG58NUvFMJDVJRl/7c8Wnap6PEs+7Zvj1Q==",
+      "version": "5.0.18",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.0.18.tgz",
+      "integrity": "sha512-YCsoYPTcs713sI7tLtxaPrIhXAXvEetGg5Ry02ivA8qUOb3fQHojbK/X9HLD5OOKvFUNR2Ynkwb1kR1hVKQHpw==",
       "dev": true
     },
     "@gar/promisify": {
diff --git a/package.json b/package.json
index b724161..c294347 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
-    "@fontsource/inter": "^4.5.12",
+    "@fontsource/inter": "^5.0.0",
     "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
     "@storybook/addon-actions": "^6.5.15",
diff --git a/src/theme/config.css.ts b/src/theme/config.css.ts
index fc47e2e..2a50cc2 100644
--- a/src/theme/config.css.ts
+++ b/src/theme/config.css.ts
@@ -4,7 +4,7 @@ import { toRem } from "./util";
 
 export const [configClass, config] = createTheme({
   font: {
-    Inter: "InterVariable, 'Inter', -apple-system, 'Segoe UI', 'Helvetica', 'Arial', sans-serif",
+    Inter: "Inter Variable, 'Inter', -apple-system, 'Segoe UI', 'Helvetica', 'Arial', sans-serif",
   },
   fontSize: {
     D400: toRem(45),