diff --git a/web/apps/photos/src/pages/_app.tsx b/web/apps/photos/src/pages/_app.tsx
index 523ad37e6a..d7d634e963 100644
--- a/web/apps/photos/src/pages/_app.tsx
+++ b/web/apps/photos/src/pages/_app.tsx
@@ -48,9 +48,11 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import LoadingBar from "react-top-loading-bar";
 import { resumeExportsIfNeeded } from "services/export";
 import { photosLogout } from "services/logout";
-import "styles/global.css";
 import { NotificationAttributes } from "types/Notification";
 
+import "@fontsource-variable/inter"; /* Inter Variable, supports weights 100-900 */
+import "styles/global.css";
+
 export default function App({ Component, pageProps }: AppProps) {
     const router = useRouter();
     const [isI18nReady, setIsI18nReady] = useState<boolean>(false);
diff --git a/web/apps/photos/src/styles/global.css b/web/apps/photos/src/styles/global.css
index 7a06257c3c..bc29597f04 100644
--- a/web/apps/photos/src/styles/global.css
+++ b/web/apps/photos/src/styles/global.css
@@ -1,42 +1,3 @@
-/* inter-regular - latin */
-@font-face {
-    font-family: "Inter";
-    font-style: normal;
-    font-weight: 400;
-    src:
-        local(""),
-        url("/fonts/inter-v11-latin-500.woff2") format("woff2"),
-        /* Chrome 26+, Opera 23+, Firefox 39+ */
-            url("/fonts/inter-v11-latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-    font-display: swap; /*https://web.dev/font-display/?utm_source=lighthouse&utm_medium=devtools#how-to-avoid-showing-invisible-text*/
-}
-
-/* inter-600 - latin */
-@font-face {
-    font-family: "Inter";
-    font-style: normal;
-    font-weight: 700;
-    src:
-        local(""),
-        url("/fonts/inter-v11-latin-600.woff2") format("woff2"),
-        /* Chrome 26+, Opera 23+, Firefox 39+ */
-            url("/fonts/inter-v11-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-    font-display: swap;
-}
-
-/* inter-800 - latin */
-@font-face {
-    font-family: "Inter";
-    font-style: normal;
-    font-weight: 900;
-    src:
-        local(""),
-        url("/fonts/inter-v11-latin-800.woff2") format("woff2"),
-        /* Chrome 26+, Opera 23+, Firefox 39+ */
-            url("/fonts/inter-v11-latin-800.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-    font-display: swap;
-}
-
 html,
 body {
     height: 100%;
diff --git a/web/packages/base/package.json b/web/packages/base/package.json
index 9429ae8b01..319af55ae3 100644
--- a/web/packages/base/package.json
+++ b/web/packages/base/package.json
@@ -6,6 +6,7 @@
         "@/utils": "*",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
+        "@fontsource-variable/inter": "^5.1.1",
         "@mui/icons-material": "^6.3.1",
         "@mui/material": "^6.3.1",
         "comlink": "^4.4.2",
diff --git a/web/yarn.lock b/web/yarn.lock
index 03dd3729c8..7aeec4fcf2 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -501,6 +501,11 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
   integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
 
+"@fontsource-variable/inter@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@fontsource-variable/inter/-/inter-5.1.1.tgz#55997abca7c1da57036a79bab4160ff35bab8f0a"
+  integrity sha512-OpXFTmiH6tHkYijMvQTycFKBLK4X+SRV6tet1m4YOUH7SzIIlMqDja+ocDtiCA72UthBH/vF+3ZtlMr2rN/wIw==
+
 "@humanfs/core@^0.19.1":
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/@humanfs/core/-/core-0.19.1.tgz#17c55ca7d426733fe3c561906b8173c336b40a77"