Fix font configuration for proper Geist font display

rmitts · rmitts · commit 1d9d0138f685 · 2025-10-04T22:44:53.000-06:00
- Removed legacy @next/font package (not needed in Next.js 15)
- Updated layout.tsx to apply font CSS variables to html element
- Added font-family declarations to globals.css with proper fallbacks
- Improved font rendering with anti-aliasing settings
diff --git a/app/globals.css b/app/globals.css
@@ -77,5 +77,27 @@
   }
   body {
     @apply bg-background text-foreground;
+    font-feature-settings: "liga" on, "clig" on;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  
+  /* Apply font families */
+  .font-sans {
+    font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  }
+  
+  .font-mono {
+    font-family: var(--font-geist-mono), ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+  }
+  
+  /* Default font for html */
+  html {
+    font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  }
+  
+  /* Code elements should use mono font */
+  code, kbd, samp, pre {
+    font-family: var(--font-geist-mono), ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
   }
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -25,10 +25,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+    <html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body className="font-sans antialiased">
         <SidebarProvider>
           <AppSidebar />
           <main className="flex-1 overflow-y-auto">
