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} />

apps/website/src/app/globals.css

@@ -1,8 +1,8 @@
 @import "tailwindcss";
 
 @theme {
-  --font-body: var(--font-sarabun, ui-sans-serif), system-ui, sans-serif;
-  --font-display: var(--font-body);
+  --font-body: var(--font-body-active, var(--font-body-locale, ui-sans-serif)), system-ui, sans-serif;
+  --font-display: var(--font-display-active, var(--font-display-locale, var(--font-body-locale, ui-sans-serif))), system-ui, sans-serif;
   --font-sans: var(--font-body);
 
   --color-brand-primary: #FF6B6B;
@@ -45,6 +45,37 @@
 }
 
 @layer base {
+  :root,
+  html {
+    --font-body-locale: var(--font-sarabun, "Sarabun"), "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
+    --font-display-locale: var(--font-body-locale);
+  }
+
+  html[lang="en"] {
+    --font-body-locale: "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
+    --font-display-locale: var(--font-body-locale);
+  }
+
+  html[lang="ja"] {
+    --font-body-locale: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
+    --font-display-locale: var(--font-body-locale);
+  }
+
+  html[lang="zh"] {
+    --font-body-locale: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
+    --font-display-locale: var(--font-body-locale);
+  }
+
+  html[lang="ko"] {
+    --font-body-locale: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
+    --font-display-locale: var(--font-body-locale);
+  }
+
+  html[lang="vi"] {
+    --font-body-locale: "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
+    --font-display-locale: var(--font-body-locale);
+  }
+
   body {
     @apply bg-surface-page text-text-main font-sans antialiased;
     background-image: radial-gradient(circle at top right, rgba(255,107,107,0.15), transparent 40%),