diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 69f7f33..12ec196 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -18,7 +18,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${GeistSans.variable} ${GeistMono.variable} antialiased`}
+        className={`${GeistSans.variable} ${GeistMono.variable} antialiased font-sans`}
       >
         <ThemeProvider
           attribute="class"
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1ce8c3a..a87a08d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,7 +4,7 @@ import { Tags } from "lucide-react";
 
 export default function Home() {
   return (
-    <div className="flex flex-col min-h-screen font-[family-name:var(--font-geist-sans)] bg-background">
+    <div className="flex flex-col min-h-screen bg-background">
       <main className="flex-grow flex items-center justify-center p-4 sm:p-8">
         <div className="flex flex-col gap-8 items-center w-full max-w-6xl">
           <div className="text-center space-y-4">
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 8358a3a..d648068 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -9,6 +9,10 @@ export default {
   ],
   theme: {
   	extend: {
+      fontFamily: {
+        sans: ["var(--font-geist-sans)"],
+        mono: ["var(--font-geist-mono)"],
+      },
   		colors: {
   			background: 'hsl(var(--background))',
   			foreground: 'hsl(var(--foreground))',
@@ -91,4 +95,4 @@ export default {
   	}
   },
   plugins: [require("tailwindcss-animate")],
-} satisfies Config;
+} satisfies Config;
\ No newline at end of file
