Here’s some text in Japanese: このセンテンスは日本語で書いた。

Nothing strange so far, right?

Here’s the same sentence in a <span/> tag with a style attribute specifying Helvetica, Verdana and Arial fonts: このセンテンスは日本語で書いた。

If you’re using Google Chrome, you may not even see the sentence at all. It will, however, render when you view the source code.

Curious to know why some parts of my sites render Japanese text and others do not, I started inspecting elements with Japanese text in Chrome, enabling and disabling rules. When I disabled font-family rules specifying sans-serif fonts, the Japanese text re-appeared. Enabling the sans-serif rule made them disappear again.

I’m running a Windows XP machine, and when I opened up the Character Map to see what extended characters Helvetica supports, I saw a sea of dots. Verdana and Arial supported extended Western characters but no Asian characters. (Arial Unicode MS does support Asian characters.)

It looks like Chrome is pretty literal about how it renders fonts — if it encounters a character the font doesn’t support, it’s not going to render it. In fact, it won’t even bother trying to render an analogous sans-serif Japanese font.

Here’s our same example sentence with a style attribute specifying a sans-serif font-family: このセンテンスを書いた。

Firefox and Internet Explorer look like they substitute fonts to render sans-serif Japanese text, probably falling back on MS PGothic.

If you want a mix of English and Japanese text to render with a sans-serif font in Google Chrome, it looks like you have to specify those sans-serif fonts in your CSS.

Example: This sentence mixes 日本語 and 英語 with Arial MS Unicode and MS PGothic specified in the font-family.

Of course, this means your English text is also rendered in Arial Unicode MS or MS PGothic, which pales next Helvetica. And Mac users? Well, that’s an entire cross-platform can of worms I haven’t even tested.

UPDATE, 06/01/2010, 0917: Of course, this site uses UTF-8 for character encoding. If a site uses Shift-JIS or EUC-JP, these problems may not be an issue.

Also, the examples may not adequately demonstrate the sans-serif issue, so here are more examples using <h1/>.

Sans-serif specified in font-family:

日本語

Helvetica and sans-serif specified in font-family:

日本語

MS PGothic specified in font-family:

日本語

Arial Unicode MS specified in font-family:

日本語

Firefox falls back on MS PGothic in the Helvetica example. Internet Explorer falls back on a serif Japanese font. Chrome does not render it.

FOLLOW-UP: It’s actually WebKit’s fault.