diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
index c1375286..f3cf5403 100644
--- a/packages/frontend/src/index.css
+++ b/packages/frontend/src/index.css
@@ -2,6 +2,153 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  @font-face {
+    font-family: 'InterDisplay';
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-Thin.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'InterDisplay';
+    font-style: italic;
+    font-weight: 100;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-ThinItalic.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'InterDisplay';
+    font-style: normal;
+    font-weight: 200;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-ExtraLight.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'InterDisplay';
+    font-style: italic;
+    font-weight: 200;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-ExtraLightItalic.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'InterDisplay';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-Light.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'InterDisplay';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-LightItalic.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'InterDisplay';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-Regular.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'InterDisplay';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-Italic.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'InterDisplay';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-Medium.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'InterDisplay';
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-MediumItalic.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'InterDisplay';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-SemiBold.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'InterDisplay';
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-SemiBoldItalic.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'InterDisplay';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-Bold.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'InterDisplay';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-BoldItalic.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'InterDisplay';
+    font-style: normal;
+    font-weight: 800;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-ExtraBold.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'InterDisplay';
+    font-style: italic;
+    font-weight: 800;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-ExtraBoldItalic.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'InterDisplay';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-Black.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'InterDisplay';
+    font-style: italic;
+    font-weight: 900;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-BlackItalic.woff2')
+      format('woff2');
+  }
+}
+
 @layer utilities {
   .focus-ring {
     @apply focus-visible:ring-[3px] focus-visible:ring-snowball-200 focus-visible:ring-offset-1 focus-visible:ring-offset-snowball-500 focus-visible:outline-none;
diff --git a/packages/frontend/tailwind.config.js b/packages/frontend/tailwind.config.js
index 2ddac405..08953002 100644
--- a/packages/frontend/tailwind.config.js
+++ b/packages/frontend/tailwind.config.js
@@ -14,6 +14,7 @@ export default withMT({
       },
       fontFamily: {
         sans: ['Inter', 'sans-serif'],
+        'inter-display': ['InterDisplay', 'sans-serif'],
       },
       fontSize: {
         '2xs': '0.625rem',