tailwindcss/integrations
Robin Malfait e48c5e8047
Fix weird character rendering on Windows with Japanese locale (#20318)
This PR fixes an issue where some characters are incorrectly rendered on
Windows with the Japanese locale.

This is arguably a bug in the font that's loaded by Windows when it
encounters `system-ui`. But waiting for fixes there might ... take a
while.

Another option is to not change the defaults in Tailwind CSS and instead
let the users that support different locales implement a fallback by
overriding the `--font-sans` variable.

The biggest reason for me to _not_ change it in Tailwind CSS is that it
requires us to know what the (proper) fallback fonts need to be on a per
OS basis.

But the main reason why I did want to make the change is that MDN says
this about the `system-ui` font:

> Glyphs are taken from the default user interface font on a given
platform. Because typographic traditions vary widely across the world,
this generic is provided for typefaces that don't map cleanly into the
other generics.
>
> **Note:** As the name implies, `system-ui` is intended to make UI
elements look like native apps, and not for typesetting large paragraphs
of text. It may cause the displayed typeface to be undesirable for some
users—for example, the default Windows CJK font may render Latin scripts
poorly, and the `lang` attribute may not affect the displayed font. Some
operating systems do not allow customizing `system-ui`, while browsers
generally allow customizing the `sans-serif` font family. For large
paragraphs, use `sans-serif` or some other non-UI font family instead.
>
> —
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-family#system-ui

There are PRs in other big projects that made this kind of change as
well. E.g.:

- https://github.com/withastro/starlight/pull/3729
- https://github.com/vuejs/vitepress/pull/4988

The reasoning for getting rid of `ui-sans-serif` is twofold:
1. Because the starlight PR seems very well tested, and they got rid of
it
2. In the event that the browser decided to load the broken font when it
encounters `ui-sans-serif`, then we will run into the same issue again.

Fixes: #19767
Fixes: #19768


## Test plan

1. `system-ui` is not used anymore, so the bug doesn't happen
3. Everything still looks the same for the places I checked, but it's
hard to know if this created _other_ issues on other OS + Locale
combinations...
2026-07-14 17:04:20 +02:00
..
cli Fix weird character rendering on Windows with Japanese locale (#20318) 2026-07-14 17:04:20 +02:00
oxide chore: fix some typos in comments (#19475) 2025-12-22 13:09:19 +00:00
postcss Improve codebase quality (#19999) 2026-04-30 23:32:37 +02:00
upgrade Fix hues in achromatic theme colors to be none (#20314) 2026-07-09 13:36:34 +02:00
vite Handle CSS nesting natively (#20124) 2026-07-07 18:28:41 +02:00
webpack Fix webpack loader cache key for resource queries (#19723) 2026-03-20 16:34:11 +00:00
package.json migrate to pnpm v11 (#20273) 2026-06-25 19:14:10 +02:00
utils.ts migrate to pnpm v11 (#20273) 2026-06-25 19:14:10 +02:00
vitest.config.ts Improve integration tests (stability + performance) (#15125) 2024-12-12 13:48:56 +01:00