feat: reference geist from google fonts (#876)

jeremyphilemon · web-flow · commit 1a8cd993f433 · 2025-03-18T13:57:06.000-07:00
diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
@@ -38,7 +38,7 @@ export default function Page() {
       setIsSuccessful(true);
       router.refresh();
     }
-  }, [state.status, router]);
+  }, [state.status]);
 
   const handleSubmit = (formData: FormData) => {
     setEmail(formData.get('email') as string);
diff --git a/app/(auth)/register/page.tsx b/app/(auth)/register/page.tsx
@@ -39,7 +39,7 @@ export default function Page() {
       setIsSuccessful(true);
       router.refresh();
     }
-  }, [state, router]);
+  }, [state]);
 
   const handleSubmit = (formData: FormData) => {
     setEmail(formData.get('email') as string);
diff --git a/app/(chat)/layout.tsx b/app/(chat)/layout.tsx
@@ -2,7 +2,6 @@ import { cookies } from 'next/headers';
 
 import { AppSidebar } from '@/components/app-sidebar';
 import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
-
 import { auth } from '../(auth)/auth';
 import Script from 'next/script';
 
diff --git a/app/globals.css b/app/globals.css
@@ -102,20 +102,6 @@
     body {
         @apply bg-background text-foreground;
     }
-
-    @font-face {
-        font-family: "geist";
-        font-style: normal;
-        font-weight: 100 900;
-        src: url(/fonts/geist.woff2) format("woff2");
-    }
-
-    @font-face {
-        font-family: "geist-mono";
-        font-style: normal;
-        font-weight: 100 900;
-        src: url(/fonts/geist-mono.woff2) format("woff2");
-    }
 }
 
 .skeleton {
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,6 @@
-import type { Metadata } from 'next';
 import { Toaster } from 'sonner';
-
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
 import { ThemeProvider } from '@/components/theme-provider';
 
 import './globals.css';
@@ -15,6 +15,18 @@ export const viewport = {
   maximumScale: 1, // Disable auto-zoom on mobile Safari
 };
 
+const geist = Geist({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-geist',
+});
+
+const geistMono = Geist_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-geist-mono',
+});
+
 const LIGHT_THEME_COLOR = 'hsl(0 0% 100%)';
 const DARK_THEME_COLOR = 'hsl(240deg 10% 3.92%)';
 const THEME_COLOR_SCRIPT = `\
@@ -48,6 +60,7 @@ export default async function RootLayout({
       // prop is necessary to avoid the React hydration mismatch warning.
       // https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app
       suppressHydrationWarning
+      className={`${geist.variable} ${geistMono.variable}`}
     >
       <head>
         <script
@@ -56,7 +69,7 @@ export default async function RootLayout({
           }}
         />
       </head>
-      <body className="">
+      <body className="antialiased">
         <ThemeProvider
           attribute="class"
           defaultTheme="system"
diff --git a/package.json b/package.json
@@ -55,7 +55,7 @@
     "geist": "^1.3.1",
     "lucide-react": "^0.446.0",
     "nanoid": "^5.0.8",
-    "next": "15.2.2-canary.1",
+    "next": "15.3.0-canary.12",
     "next-auth": "5.0.0-beta.25",
     "next-themes": "^0.3.0",
     "orderedmap": "^2.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/fonts/geist-mono.woff2 b/public/fonts/geist-mono.woff2
diff --git a/public/fonts/geist.woff2 b/public/fonts/geist.woff2
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -8,11 +8,11 @@ const config: Config = {
     './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
-    fontFamily: {
-      sans: ['geist'],
-      mono: ['geist-mono'],
-    },
     extend: {
+      fontFamily: {
+        sans: ['var(--font-geist)'],
+        mono: ['var(--font-geist-mono)'],
+      },
       screens: {
         'toast-mobile': '600px',
       },

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ export default function Page() {`
`38`	`38`	`setIsSuccessful(true);`
`39`	`39`	`router.refresh();`
`40`	`40`	`}`
`41`		`- }, [state.status, router]);`
	`41`	`+ }, [state.status]);`
`42`	`42`
`43`	`43`	`const handleSubmit = (formData: FormData) => {`
`44`	`44`	`setEmail(formData.get('email') as string);`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ export default function Page() {`
`39`	`39`	`setIsSuccessful(true);`
`40`	`40`	`router.refresh();`
`41`	`41`	`}`
`42`		`- }, [state, router]);`
	`42`	`+ }, [state]);`
`43`	`43`
`44`	`44`	`const handleSubmit = (formData: FormData) => {`
`45`	`45`	`setEmail(formData.get('email') as string);`