diff --git a/apps/spa/src/App.tsx b/apps/spa/src/App.tsx
index 5bf2cff..654f3d8 100644
--- a/apps/spa/src/App.tsx
+++ b/apps/spa/src/App.tsx
@@ -37,6 +37,7 @@ function App() {
 
   useEffect(() => {
     const lang = i18n.language;
+    document.documentElement.lang = lang;
     document.body.classList.remove('font-sans-ja', 'font-sans-zh', 'font-sans-ko');
     
     if (lang === 'ja') {
diff --git a/apps/spa/src/index.css b/apps/spa/src/index.css
index 6ab6e27..bc93ddc 100644
--- a/apps/spa/src/index.css
+++ b/apps/spa/src/index.css
@@ -1,6 +1,13 @@
 @import "tailwindcss";
 
 @theme {
+  --font-sans: 'Sarabun', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-heading: 'Prompt', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, 'Prompt', serif;
+  --font-sans-ja: '"Noto Sans JP"', ui-sans-serif, system-ui, sans-serif;
+  --font-sans-zh: '"Noto Sans SC"', ui-sans-serif, system-ui, sans-serif;
+  --font-sans-ko: '"Noto Sans KR"', ui-sans-serif, system-ui, sans-serif;
+
   --color-pop-pink: #FF6B6B;
   --color-pop-yellow: #FFF200;
   --color-pop-orange: #FFA07A;
@@ -92,3 +99,9 @@ html {
   border-radius: 16px;
   box-shadow: var(--shadow-brutal);
 }
+
+/* Fallback Thai Serif to Prompt for luxury classical look */
+:lang(th) .font-serif {
+  font-family: 'Prompt', sans-serif !important;
+}
+