diff --git a/public/index.html b/public/index.html
index 6795b7ebd0..d7dbeca7c2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,6 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
+      rel="stylesheet"
+    />
     <link rel="icon" href="%PUBLIC_URL%/icon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
diff --git a/src/index.css b/src/index.css
index 56741c0a8a..3b9d7af85f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,7 +1,6 @@
 body {
+  font-family: "Inter";
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
-    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/src/style/theme.ts b/src/style/theme.ts
index 9ef6dcd39a..f035f1002b 100644
--- a/src/style/theme.ts
+++ b/src/style/theme.ts
@@ -53,12 +53,14 @@ const theme = extendTheme({
     Text: {
       baseStyle: {
         fontWeight: "400",
+        fontFamily: "Inter",
       },
       sizes,
     },
     Heading: {
       baseStyle: {
         fontWeight: "600",
+        fontFamily: "Inter",
       },
       sizes,
     },
@@ -112,6 +114,7 @@ const theme = extendTheme({
       body: {
         bg: colors.black,
         color: colors.white,
+        fontFamily: "Inter",
       },
     },
   },
