How do I prevent Chinese characters from being displayed in the wrong script on Windows? (Traditional/Simplified)

Question

On Google Chrome, Chinese characters are being marked in different scripts on the same site, and traditional characters are rendered in a sans-serif font while simplified are rendered in a serif font:

On Duolingo, we have two different fonts in the same sentence:

On Yabla, the search box renders 在饭馆 with 在 in traditional and 饭馆 in simplified:

This started today (07/16/2022) and I have not made any changes to my font or language settings since about a week before this started happening. I am on Version 10.0.19044 Build 19044 of Windows 10 and running the latest versions of Google Chrome (Version 103.0.5060.114) and Discord (Stable 138254 (8e7d809)).

I do not have any custom fonts installed for Chinese. This issue persists in some apps (such as Discord) but does not persist in other browsers such as Firefox or Opera. I have checked my font settings in Chrome and there are no options for fonts in languages different from the UI/System language, which in my case is English.

I have tried uninstalling and reinstalling both traditional and simplified Chinese in my Windows settings. In Chrome, when selecting the different characters with the inspect tool, it displays that they are being rendered with the same font set but apparently different fonts are being chosen for each script.

If it is not possible to correct this issue at the source (identifying characters correctly) then I would like to know how to set the default font for each language so that the characters in the simplified script appear in a sans-serif font that looks similar to the traditional font.

Answer 1

Okay, the authors of a website can specify what fonts to use for that site. That specification can be in a like so "font 1", "font 2", "font 3", ..., serif (or sans-serif)

What the browser does is it will search your computer to see if "font 1" is installed (or downloaded from the Net). If so, use it. Otherwise, move down the list and repeat.

It also happens that, for CJK characters, not every character is encoded in every font. If the brower encounters a character that's not in "font 1," it will go to "font 2" to see if it's there, and so forth.

So if "font 1" specified does not contain simplied Chinese, the browser is goinf to use two different fonts, resulting in what you saw.

Answer 2

As unicode CJK (means Chinese, Japanese and Korean characters) is rather a large word set, most fonts will only implement their target languages to reduce size. For Chinese fonts, some would only implement Simplified Chinese characters while some would only implement the Traditional one.

“在” is of same shape in both Simplified and Traditional, while “饭馆” are not in the traditional Chinese character set. They are replaced with “飯館”, and if a font designated for Traditional Chinese is used, “饭馆” would not render correctly, and fallback to a font your computer have.

The creator of the website may choose a font causing such problem. The font provided by Microsoft ususally have the shapes for both Chinese flavor (otherwise, the “饭馆” would be rendered as empty boxes), but it may also go wrong. You can do these to check where the problem lies:

1. Press "F12" to call out the DevTools
2. Use "Inspect Element" or press Ctrl + Shift + C and select the wrongly displayed font
3. In the "Computed" tab, check the "Rendered Fonts", you may see what the font is, and whether the font is from your device or from Internet.

If your font is shown as from a local file, you may need to:

• Install other Chinese dialect to your computer in Windows, for example, Chinese (Traditional).
• Change the default font to a consistent one in Chrome, according to https://stackoverflow.com/questions/14042597/how-can-i-change-the-current-font-on-chrome

Answer 3

I don't know if there are equivalent settings for Chrome, but Firefox can specify a list of default fonts per script.

This means that if a website falls back to the abstract "sans-serif" font (as English websites typically do for Chinese), the browser will pick a different font based on what language the site specified for that text. The problem is that most sites usually don't bother specifying, meaning that the Latin font is used everywhere (falling back sloppily, either alphabetically or by prioritizing some old standard), which will not have good fallbacks specified for non-Latin. This is especially true for user submitted content like Duolingo comments, which are not language tagged, and inherit the main language of the page which is indeed English.

The solution available in Firefox is to go to the about:config page and search for and change the font.name-list. family of settings, notably the ones for x-western and x-unicode, adding names of Chinese fonts to those lists, separated by commas.

Something more advanced (but that should work in Chrome as well) is overriding the CSS using an addon like Stylus.