I noticed that when the Chinese characters are shown in headlines and other places sometimes my browser (Firefox 8 on Windows 7) is mixing and matching fonts in order to fill in the right characters.

Example: enter image description here

This happens because the browser tries to find installed fonts based on what language it suspects the characters are. And for some reason Firefox prefers Japanese to Chinese, thus breaking the rendering of the Chinese characters.

The way to fix this is to specify the language of the text

<span lang="zh">他妈的</span>

Otherwise, a webfont might have to be used in order to ensure that a particular client has support for the font in question, but that web font would need excellent coverage of the Hanzi range.

Edit: Some answers seem to suggest that I may be dealing with a faulty set-up. Let me re-iterate:

  • I have a default installation of Windows 7 with support for Asian scripts and input methods and have not added or removed any fonts. I also have Microsoft Office 2010 installed which may add some fonts of its own.
  • I have a default installation of Firefox and I have not played around with its fonts or css or font-stack settings.
  • I have seen this issue with every version of Windows since XP and every version of Firefox since 3.5. Somewhere around the 3.0-3.5 timeframe Firefox changed how they look up fonts and this issue was introduced.
  • Different browsers look up Chinese fonts differently. If you don't specify a particular font then you are at the mercy of the browser's language-detection features.

Edit: When Firefox has lang=zh set, the headline font selection is the same as Chrome's:

enter image description here

This looks better but is not perfect in my opinion, because it's using a serif font in a sans-serif headline.

Edit 2: I have verified that this bug still exists in the new Beta theme.

I can confirm it's messed up on FF, but I don't have this problem on Chrome/Win: i.stack.imgur.com/u72z8.png –  Orion Dec 17 '11 at 0:42
@NullUserException: In Chrome's case, the behaviour is more consistent, however, I still think it's wrong, because presumably the font should match the serif/sans-serif nature of the headline. –  Mr. Shiny and New 安宇 Dec 17 '11 at 2:18
I confirm I have the same bug on Windows 7 / Firefox 8 –  this.lau_ Dec 23 '11 at 2:28

5 Answers 5

Not all fonts possess all characters... We should find a font that is spread enough (or alternatively choose a free one and maybe link it for download) and that has a high support and stick with it.

In this case the browser will choose from the installed fonts based on the language it thinks it is using, and the Japanese fonts don't have the same coverage as the Chinese fonts. Firefox by default prefers Japanese over Chinese which is what leads to this mismatch, because we are using characters that are common to both languages and some characters that don't exist in Japanese. –  Mr. Shiny and New 安宇 Dec 20 '11 at 13:29
For information, there is no good free (as in open source) Chinese font available. The closest would be the "AR PL UKai" series, as used in some Linux distributions, but it has many, many mistakes (wrong characters, traditional/simplified confusion, etc.). Technically, the best solution might be to do as the OP suggested - use the "lang" attribute and let the browser do the rest. Maybe we could also suggest some general families like "kaiti", "ming", etc. and display that if it's installed on the user's computer. –  this.lau_ Dec 23 '11 at 12:45

I am using Ubuntu Linux with Chrome browser. The Chinese characters in the headlines are bold. This means that any complex characters become simply blue splodges with no discernible detail that would allow the character to be read easily. See the screen shots below for examples:

Blured character. Blured character. enter image description here

While I recognise that this site is still in beta, if it is to transition out of beta, the theme designer would do well to choose a non-bold font weight for the headlines.


I do not have this problem, I use Mac OS X 10.7, tested on Safari/Firefox

Presumably, the MacOS font features are different than Windows's. I've seen the problem in every version of Firefox since 3.5 on Windows XP, Vista, and 7. I've even seen it in some other browsers. –  Mr. Shiny and New 安宇 Dec 14 '11 at 16:39

Dont' think this is a bug on the site's side - probably a setting in your browser/computer. I actually bumped into this problem and asked a question about it... Some characters look different handwritten and on the computer - how to learn the differences?

I have a default installation of Windows 7 with default support for Asian languages and a default installation of Firefox 8. If this is not a tier-1 supported platform with its default settings, then what in the world would be? Also: I have seen this on every Windows version since XP combined with every Firefox version since 3.5. It may be a "browser bug" but it is trivially worked around by setting html attributes in the code. –  Mr. Shiny and New 安宇 Dec 20 '11 at 13:31

@Jin may weigh in at some point, but this isn't really an issue we can fix easily. Firstly, it appears that only Firefox does this wrong. Secondly, every Chinese site has this issue because of the sad state of Chinese fonts available (apparently).

It looks like there are a pretty good selection of free fonts here: http://www.justfont.com/fonts/. I'm can't read Chinese, but this one looks nice to me.

I'll check on the idea of font embedding and update this answer when I can say something more definitive.

Update: We've given this a bit more thought and research, and unfortunately the final result is that we're not going to do anything about this. The truly right answer is that users simply have to configure their own fonts if they want it to work correctly. However, that being said, we often try to find workarounds so that our users don't have to be expert sysadmins to get a decent experience.

As I mentioned above, font-embedding won't really solve the problem. The other idea was to try to make use of the lang="zh" attribute. The problem with that approach is that attribute is supposed to specify the language for the page (if used in <html>) or the block or span-level tag. It won't work for blocks/spans because all the places where this comes into play are user content, and it's incorrect for <html> because the language for the page is still English. It's not a good idea to trade one browser's incorrect handling of font selection for potentially other browser's incorrect handling of language detection.

I'm sorry to not be able to give you anything better, but this is really a Firefox bug that they need to fix.

There are specific, concrete solutions in the question. 1: set the lang attribute. 2: use a webfont (maybe google Noto). –  Mr. Shiny and New 安宇 Oct 16 at 16:17
I'm looking into this more and I'll update my answer to address these more specifically. I did see them, and I forgot to address them. –  Ben Collins Oct 16 at 16:29

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .