feat: sets default font to Inter (noodle-run#137)

* feat(web): adds inter font

* feat(storybook): adds inter font

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>
   );
 };
 

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';

packages/config/tailwind/tailwind.config.ts

@@ -12,6 +12,9 @@ const config = {
       },
     },
     extend: {
+      fontFamily: {
+        sans: ['var(--font-inter)'],
+      },
       colors: {
         primary: {
           50: '#ff93ad',

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;

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:^",

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;

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",