diff --git a/bun.lockb b/bun.lockb
index 48f1a823..65d4bdc9 100644
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index e77cd64c..fd75b922 100644
--- a/package.json
+++ b/package.json
@@ -16,8 +16,8 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@floating-ui/react-dom": "2.1.0",
-    "@fontsource/lexend-deca": "5.0.12",
-    "@fontsource/montserrat": "5.0.17",
+    "@fontsource-variable/lexend-deca": "^5.0.13",
+    "@fontsource-variable/montserrat": "^5.0.19",
     "@headlessui/react": "^2.0.4",
     "@muetab/react-sortable-hoc": "^2.0.1",
     "@mui/material": "5.15.19",
diff --git a/src/App.jsx b/src/App.jsx
index 7cc8eff3..6f3456f8 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -13,6 +13,9 @@ import Welcome from 'features/welcome/Welcome';
 import BackgroundDefaults from 'features/background/options/default';
 import defaults from 'config/default';
 
+import '@fontsource-variable/lexend-deca';
+import '@fontsource-variable/montserrat';
+
 const useAppSetup = () => {
   useEffect(() => {
     loadSettings();
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 61eb2437..733337f7 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -13,7 +13,7 @@ body {
 }
 
 * {
-  font-family: 'Lexend Deca', Montserrat, sans-serif !important;
+  font-family: 'Lexend Deca Variable', 'Montserrat Variable', sans-serif !important;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   outline: none;
@@ -85,39 +85,6 @@ body {
   height: 100%;
 }
 
-/* fonts (imported from fontsource) */
-// i don't even know what the unicode-range is for, but we're keeping it so that nothing breaks
-@font-face {
-  font-family: 'Lexend Deca';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url('../../node_modules/@fontsource/lexend-deca/files/lexend-deca-latin-400-normal.woff2')
-    format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
-    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-  font-family: 'Lexend Deca';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url('../../node_modules/@fontsource/lexend-deca/files/lexend-deca-latin-ext-400-normal.woff2')
-    format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
-    U+2C60-2C7F, U+A720-A7FF;
-}
-
-@font-face {
-  font-family: Montserrat;
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url('../../node_modules/@fontsource/montserrat/files/montserrat-cyrillic-400-normal.woff2')
-    format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
 
 /* error */
 .criticalError {