diff --git a/apps/web/src/pages/_app.tsx b/apps/web/src/pages/_app.tsx
index 5579c713..e52f00f9 100644
--- a/apps/web/src/pages/_app.tsx
+++ b/apps/web/src/pages/_app.tsx
@@ -1,18 +1,25 @@
+import '@/styles/globals.css';
+
 import { Provider as WrapBalancerProvider } from 'react-wrap-balancer';
 import { Analytics } from '@vercel/analytics/react';
+import { SessionProvider } from 'next-auth/react';
 import { DefaultSeo } from 'next-seo';
 import { ThemeProvider } from 'next-themes';
 import { type AppProps } from 'next/app';
+import { Inter } from 'next/font/google';
 
 import { type Session } from '@noodle/auth';
 
-import '@/styles/globals.css';
-
-import { SessionProvider } from 'next-auth/react';
-
 import { api } from '@/utils/api';
 import { seo } from '@/utils/seo';
 
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+  weight: 'variable',
+  display: 'swap',
+});
+
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 interface MyAppProps extends AppProps {
   pageProps: {
@@ -22,7 +29,7 @@ interface MyAppProps extends AppProps {
 
 const App = ({ Component, pageProps }: MyAppProps) => {
   return (
-    <>
+    <div className={`${inter.variable} font-sans`}>
       <DefaultSeo {...seo} />
       <SessionProvider session={pageProps.session}>
         <ThemeProvider attribute="class">
@@ -32,7 +39,7 @@ const App = ({ Component, pageProps }: MyAppProps) => {
           <Analytics />
         </ThemeProvider>
       </SessionProvider>
-    </>
+    </div>
   );
 };
 
diff --git a/packages/config/storybook/src/preview.tsx b/packages/config/storybook/src/preview.tsx
index df615fab..8b549a2b 100644
--- a/packages/config/storybook/src/preview.tsx
+++ b/packages/config/storybook/src/preview.tsx
@@ -1,3 +1,5 @@
+import '@fontsource-variable/inter';
+
 import { withThemeByClassName } from '@storybook/addon-styling';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { type Preview } from '@storybook/react';
diff --git a/packages/config/tailwind/tailwind.config.ts b/packages/config/tailwind/tailwind.config.ts
index a4efa497..70016235 100644
--- a/packages/config/tailwind/tailwind.config.ts
+++ b/packages/config/tailwind/tailwind.config.ts
@@ -12,6 +12,9 @@ const config = {
       },
     },
     extend: {
+      fontFamily: {
+        sans: ['var(--font-inter)'],
+      },
       colors: {
         primary: {
           50: '#ff93ad',
diff --git a/packages/storybook/.storybook/styles.css b/packages/storybook/.storybook/styles.css
index 03651eb0..7c1bd14c 100644
--- a/packages/storybook/.storybook/styles.css
+++ b/packages/storybook/.storybook/styles.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --font-inter: 'Inter Variable', sans-serif;
+}
+
 html,
 body {
   @apply bg-gray-1 dark:bg-graydark-1 text-gray-12 dark:text-graydark-12 h-full;
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 26fc9a6d..07651e84 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -13,6 +13,9 @@
     "storybook": "storybook dev -p 6006",
     "typecheck": "tsc --noEmit"
   },
+  "dependencies": {
+    "@fontsource-variable/inter": "^5.0.4"
+  },
   "devDependencies": {
     "@noodle/storybook-config": "workspace:^",
     "@noodle/tailwind": "workspace:^",
diff --git a/packages/ui/.storybook/styles.css b/packages/ui/.storybook/styles.css
index 03651eb0..7c1bd14c 100644
--- a/packages/ui/.storybook/styles.css
+++ b/packages/ui/.storybook/styles.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --font-inter: 'Inter Variable', sans-serif;
+}
+
 html,
 body {
   @apply bg-gray-1 dark:bg-graydark-1 text-gray-12 dark:text-graydark-12 h-full;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index d78e9691..58c11fc2 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -25,6 +25,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.0.4",
     "clsx": "^1.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d0ab74ed..31743fa7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -377,6 +377,10 @@ importers:
         version: 4.16.2
 
   packages/storybook:
+    dependencies:
+      '@fontsource-variable/inter':
+        specifier: ^5.0.4
+        version: 5.0.4
     devDependencies:
       '@noodle/storybook-config':
         specifier: workspace:^
@@ -490,6 +494,9 @@ importers:
 
   packages/ui:
     dependencies:
+      '@fontsource-variable/inter':
+        specifier: ^5.0.4
+        version: 5.0.4
       clsx:
         specifier: ^1.2.1
         version: 1.2.1
@@ -3344,6 +3351,10 @@ packages:
     resolution: {integrity: sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==}
     dev: true
 
+  /@fontsource-variable/inter@5.0.4:
+    resolution: {integrity: sha512-MYomT1JVwFAPhinw3N4mQbtwNCXSQ2n+W2JFCgXNyhzDL7hgAXzI89/yZRyNz5kYfyyG7pgsOj9YZ0aujlHbEw==}
+    dev: false
+
   /@humanwhocodes/config-array@0.11.10:
     resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==}
     engines: {node: '>=10.10.0'}