x

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

@@ -1,4 +1,5 @@
 import type { Metadata } from 'next';
+import { Kanit, Sarabun } from 'next/font/google';
 import { notFound } from 'next/navigation';
 import '../globals.css';
 import Navbar from '@/components/Navbar';
@@ -10,6 +11,20 @@ import type { MenuItem, StoreSettings } from '@homaroma/types';
 import { isSupportedLocale } from '@/lib/locales';
 import type { CSSProperties } from 'react';
 
+const sarabun = Sarabun({
+  subsets: ['latin', 'thai'],
+  display: 'swap',
+  weight: ['300', '400', '500', '600', '700'],
+  variable: '--font-sarabun',
+});
+
+const kanit = Kanit({
+  subsets: ['latin', 'thai'],
+  display: 'swap',
+  weight: ['300', '400', '500', '600', '700'],
+  variable: '--font-kanit',
+});
+
 export const metadata: Metadata = {
   title: 'HomAroma',
   description: 'Pure Origins, Artisan Craft, Zero Compromise',
@@ -96,8 +111,8 @@ function buildThemeStyle(settings: StoreSettings | null): CSSProperties | undefi
     ['--color-muted-text', tokens.mutedText],
     ['--color-line-primary', tokens.linePrimary],
     ['--color-line-primary-hover', tokens.linePrimaryHover],
-    ['--font-body', tokens.fontBody],
-    ['--font-display', tokens.fontDisplay],
+    ['--font-body-active', tokens.fontBody],
+    ['--font-display-active', tokens.fontDisplay],
     ['--shadow-card', tokens.shadowCard],
     ['--shadow-card-hover', tokens.shadowCardHover],
   ]
@@ -134,7 +149,7 @@ export default async function RootLayout({
   const themeStyle = buildThemeStyle(settings)
 
   return (
-    <html lang={lang} className="scroll-smooth">
+    <html lang={lang} className={`${sarabun.variable} ${kanit.variable} scroll-smooth`}>
       <body className="min-h-screen bg-surface-page text-text-main font-sans antialiased" style={themeStyle}>
         <ClientProviders>
           <Navbar categories={categories} initialMenu={initialMenu} settings={settings} />