x

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%),