Greek letter "Ω" is displayed as Cyrillic letter "и" when bolded in Japanese Windows #19767
Description
What version of Tailwind CSS are you using?
- 4.2.1
- 3.4.19
- (2.2.19)
- (1.9.6)
What build tool (or framework if it abstracts the build tool) are you using?
Independent
What version of Node.js are you using?
Independent
What browser are you using?
Firefox, Chrome (but independent of browsers)
What operating system are you using?
Windows 11 + Japanese locale
Reproduction URL
https://play.tailwindcss.com/fW1AAohEMz
Describe your issue
- Use Windows (8.1 or later)
- Set the system language to Japanese
- Add a Greek letter Ω
- Add
font-boldclass
The default font stack in Tailwind abuses system-ui and causes not a few problems. One of them is a bug in Yu Gothic UI, a system font for Japanese Windows, where the lowercase Cyrillic glyph for "и" is incorrectly assigned to the position of the uppercase Greek letter "Ω" only when in bold. This causes unintelligible display when viewing Greek pages or content related to resistance, regardless of language. w3c/csswg-drafts#3658 (comment)
Although now fixed, Yu Gothic UI had another bug until about six months ago where it unintentionally overlapped consecutive ideographic brackets (「」), leading to nonsensical displays on pages using Tailwind, such as ChatGPT. This forced Chromium to implement a specific fix to mitigate this bug for Yu Gothic.
w3c/csswg-drafts#11074
https://issues.chromium.org/issues/331123676?pli=1
The solution to that is simple: just ditch system-ui from your default font stack. If you only want the best appearance on Apple's OSes, -apple-system and BlinkMacSystemFont are sufficient. If you're unsure about font specifications for a regular page, sans-serif is sufficient. system-ui is a special font specification that truly shines only when your page:
- Supports various languages,
- Does not allow manual language changes from the OS language, and
- Is displayed as part of a desktop application or an OS widget.