x

apps/website/src/app/[lang]/layout.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from 'next';
+import { Sarabun } from 'next/font/google';
 import { notFound } from 'next/navigation';
 import '../globals.css';
 import Navbar from '@/components/Navbar';
@@ -9,6 +10,13 @@ import type { MegaMenuPayload } from '@/components/navigation/menuTypes';
 import type { MenuItem, StoreSettings } from '@homaroma/types';
 import { isSupportedLocale } from '@/lib/locales';
 
+const sarabun = Sarabun({
+  subsets: ['thai', 'latin'],
+  weight: ['300', '400', '500', '600', '700', '800'],
+  display: 'swap',
+  variable: '--font-sarabun',
+});
+
 export const metadata: Metadata = {
   title: 'HomAroma',
   description: 'Pure Origins, Artisan Craft, Zero Compromise',
@@ -96,7 +104,7 @@ export default async function RootLayout({
   ]);
 
   return (
-    <html lang={lang} className="scroll-smooth">
+    <html lang={lang} className={`${lang === 'th' ? sarabun.variable : ''} scroll-smooth`}>
       <body className="min-h-screen bg-pop-bg text-pop-black font-sans antialiased">
         <ClientProviders>
           <Navbar categories={categories} initialMenu={initialMenu} settings={settings} />

apps/website/src/app/globals.css

@@ -1,6 +1,8 @@
 @import "tailwindcss";
 
 @theme {
+  --font-sans: var(--font-sarabun, ui-sans-serif), system-ui, sans-serif;
+
   --color-pop-pink: #FF6B6B;
   --color-pop-yellow: #FFF200;
   --color-pop-orange: #FFA07A;