x

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

@@ -160,7 +160,7 @@ export default async function RootLayout({
   const themeStyle = buildThemeStyle(settings)
 
   return (
-    <div className="min-h-screen bg-surface-page text-text-main" lang={lang} style={themeStyle}>
+    <div className="site-theme-root min-h-screen bg-surface-page text-text-main" lang={lang} style={themeStyle}>
       <ClientProviders>
         <Navbar categories={categories} initialMenu={initialMenu} settings={settings} />
         <main className="global-main">

apps/website/src/app/globals.css

@@ -60,43 +60,49 @@
 @layer base {
   :root,
   html {
-    --font-body-locale: "Sarabun", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
-    --font-display-locale: "Sarabun", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
+    --font-body-locale: var(--font-sarabun, "Sarabun"), "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
+    --font-display-locale: var(--font-sarabun, "Sarabun"), "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
     --font-serif-locale: ui-serif;
   }
 
-  html[lang="en"] {
+  [lang="en"] {
     --font-body-locale: "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
     --font-display-locale: var(--font-body-locale);
     --font-serif-locale: ui-serif;
   }
 
-  html[lang="ja"] {
+  [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);
     --font-serif-locale: "Noto Serif JP", ui-serif;
   }
 
-  html[lang="zh"] {
+  [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);
     --font-serif-locale: "Noto Serif SC", ui-serif;
   }
 
-  html[lang="ko"] {
+  [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);
     --font-serif-locale: "Noto Serif KR", ui-serif;
   }
 
-  html[lang="vi"] {
+  [lang="vi"] {
     --font-body-locale: "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
     --font-display-locale: var(--font-body-locale);
     --font-serif-locale: ui-serif;
   }
 
   html {
-    font-family: var(--font-body-locale);
+    font-family: var(--font-body-active, var(--font-body-locale));
+  }
+
+  .site-theme-root {
+    --font-sans: var(--font-body-active, var(--font-body-locale));
+    --font-serif: var(--font-display-active, var(--font-display-locale));
+    font-family: var(--font-sans);
   }
 
   body {
@@ -108,7 +114,7 @@
 
   h1, h2, h3, h4 {
     @apply text-text-main font-semibold tracking-tight;
-    font-family: var(--font-display-locale);
+    font-family: var(--font-display-active, var(--font-display-locale));
   }
 }
 
@@ -266,7 +272,7 @@
 
   .ui-hero-title {
     color: var(--color-text-main);
-    font-family: var(--font-display-locale);
+    font-family: var(--font-display-active, var(--font-display-locale));
     font-size: 3rem;
     font-weight: 300;
     line-height: 1.25;

apps/website/src/app/layout.tsx

@@ -26,7 +26,7 @@ const playfairDisplay = Playfair_Display({
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="th" className={`${sarabun.variable} ${kanit.variable} ${playfairDisplay.variable} scroll-smooth`}>
-      <body className="min-h-screen bg-surface-page text-text-main font-sans antialiased">
+      <body className="min-h-screen bg-surface-page text-text-main antialiased">
         {children}
       </body>
     </html>