From 33d03d1cc7aeaab8e564899305cac0465c91a26f Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Mon, 8 Jun 2026 01:07:48 +0800
Subject: [PATCH] fix(fonts): put Latin system fonts before CJK so Vietnamese
 composes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Vietnamese text rendered with split diacritics — "Tất cả tài liệu" came
out as "Tâ´t ca' tài liêụ" because the previous font stack led with
six CJK-only families (Noto Sans SC/TC, PingFang SC/TC, Microsoft
YaHei/JhengHei) that have zero Vietnamese coverage. The browser still
matched the Latin base letters in those fonts and dropped the combining
tone marks onto the next available slot, breaking shaping for every
precomposed Vietnamese codepoint (U+1EA5, U+1EC7, …).

Reorder the stack so ui-sans-serif / system-ui / -apple-system / Segoe UI
lead and the CJK families follow as fallbacks. Browsers do per-glyph
font selection so Chinese characters still hit PingFang SC / Noto Sans
SC etc.; the zh-CN and zh-TW pages render unchanged. The fix needs no
extra network requests — every modern OS bundles a Latin font with
Vietnamese support.

Verified in browser at /vi/browse ("Tất cả tài liệu" / "Liên kết" /
"Tệp nén" all compose correctly) and /cn/browse (still PingFang SC).
---
 tailwind.config.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index af32365..9aae744 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -33,17 +33,26 @@ export default {
         "scale-in": "scale-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both",
       },
       fontFamily: {
+        // Put system Latin fonts FIRST so Latin script (incl. Vietnamese
+        // precomposed glyphs like ấ/ẳ/ệ) renders from a font that actually
+        // ships those code points. The CJK fonts that used to lead the stack
+        // (Noto Sans SC/TC, PingFang SC/TC, Microsoft YaHei/JhengHei) have no
+        // Vietnamese coverage, so the browser was greedily rendering the base
+        // Latin letter with a CJK font and rendering the combining tone mark
+        // separately, producing “Tâ´t / liêụ” instead of “Tất / liệu”.
+        // Per-glyph fallback still picks up the CJK fonts for Chinese
+        // characters, so existing zh-CN / zh-TW pages keep the same look.
         sans: [
+          "ui-sans-serif",
+          "system-ui",
+          "-apple-system",
+          "Segoe UI",
           "Noto Sans SC",
           "Noto Sans TC",
           "PingFang SC",
           "PingFang TC",
           "Microsoft YaHei",
           "Microsoft JhengHei",
-          "ui-sans-serif",
-          "system-ui",
-          "-apple-system",
-          "Segoe UI",
           "sans-serif",
         ],
       },