diff --git a/apps/website/src/app/globals.css b/apps/website/src/app/globals.css
index 4c0913e..ba973d1 100644
--- a/apps/website/src/app/globals.css
+++ b/apps/website/src/app/globals.css
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
 @import "tailwindcss";
 
 @theme {
diff --git a/apps/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx
index 926e372..ba0e750 100644
--- a/apps/website/src/app/layout.tsx
+++ b/apps/website/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { Kanit, Sarabun, Playfair_Display } from 'next/font/google';
+import { Kanit, Sarabun } from 'next/font/google';
 import './globals.css';
 
 const sarabun = Sarabun({
@@ -16,16 +16,9 @@ const kanit = Kanit({
   variable: '--font-kanit',
 });
 
-const playfairDisplay = Playfair_Display({
-  subsets: ['latin'],
-  display: 'swap',
-  weight: ['400', '500', '600', '700'],
-  variable: '--font-playfair',
-});
-
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="th" className={`${sarabun.variable} ${kanit.variable} ${playfairDisplay.variable} scroll-smooth`}>
+    <html lang="th" className={`${sarabun.variable} ${kanit.variable} scroll-smooth`}>
       <body className="min-h-screen bg-surface-page text-text-main antialiased">
         {children}
       </body>