diff --git a/package.json b/package.json
index e5d08aa0..ba76f180 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     ".next/cache"
   ],
   "dependencies": {
+    "@fontsource/inter": "^4.5.15",
     "@prisma/client": "4.11.0",
     "@tanstack/react-query": "^4.16.1",
     "@umami/prisma-client": "^0.2.0",
diff --git a/pages/_app.js b/pages/_app.js
index 19182c40..fcff10bf 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,18 +1,17 @@
 import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import Head from 'next/head';
-import { Inter } from 'next/font/google';
+import Script from 'next/script';
 import { useRouter } from 'next/router';
 import useLocale from 'hooks/useLocale';
 import useConfig from 'hooks/useConfig';
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/700.css';
 import 'react-basics/dist/styles.css';
 import 'styles/variables.css';
 import 'styles/locale.css';
 import 'styles/index.css';
 import 'chartjs-adapter-date-fns';
-import Script from 'next/script';
-
-const inter = Inter({ subsets: ['latin'] });
 
 const client = new QueryClient({
   defaultOptions: {
@@ -53,11 +52,6 @@ export default function App({ Component, pageProps }) {
           <meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
           <meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <style>{`
-            html {
-              font-family: ${inter.style.fontFamily};
-            }
-          `}</style>
         </Head>
         <Component {...pageProps} />
         {!pathname.includes('/share/') && <Script src={`${basePath}/telemetry.js`} />}
diff --git a/styles/index.css b/styles/index.css
index 56491f2a..4031851a 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -1,5 +1,6 @@
 html,
 body {
+  font-family: Inter, sans-serif;
   font-size: 14px;
   font-weight: normal;
   line-height: 1.5rem;
diff --git a/yarn.lock b/yarn.lock
index b10e8fac..b759ff50 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1274,6 +1274,11 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.36.0.tgz#9837f768c03a1e4a30bd304a64fb8844f0e72efe"
   integrity sha512-lxJ9R5ygVm8ZWgYdUweoq5ownDlJ4upvoWmO4eLxBYHdMo+vZ/Rx0EN6MbKWDJOSUGrqJy2Gt+Dyv/VKml0fjg==
 
+"@fontsource/inter@^4.5.15":
+  version "4.5.15"
+  resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-4.5.15.tgz#eed1873d68755d3b52d6fcfcfa3493118430a512"
+  integrity sha512-FzleM9AxZQK2nqsTDtBiY0PMEVWvnKnuu2i09+p6DHvrHsuucoV2j0tmw+kAT3L4hvsLdAIDv6MdGehsPIdT+Q==
+
 "@formatjs/cli@^4.2.29":
   version "4.8.4"
   resolved "https://registry.npmjs.org/@formatjs/cli/-/cli-4.8.4.tgz"