/ coding

Setting your CSS for Japanese fonts

Last week I wrote about issues related to Japanese fonts and web design. I concluded by saying:

… relying on [Japanese] system fonts for website design means that we are limited to serif and sans serif fonts.

Of course, most of the time “serif” and “sans serif” will be some flavor of “mincho” and “gothic,” respectively. The latter may be the proper terms in font-speak, but serif and sans-serif are the final level in the CSS cascade to name your preference.

So how would you write out your CSS for Japanese fonts?

Here are two of the most basic settings:

font-family: serif;

…will produce this: 美味しいコーヒーを飲みたい。

font-family: sans-serif;

…will produce this: 美味しいコーヒーを飲みたい。

(What font you actually see for each line of Japanese above will depend on whether your computer can display Japanese and what the default font settings are for your browser or system.)


From there, it is possible to get more specific. Here is the example I used last week from Ameba:

font-family: ’ヒラギノ角ゴ Pro W3’, ‘Hiragino Kaku Gothic Pro’, メイリオ, Meiryo, Osaka, ‘MS Pゴシック’, ‘MS PGothic’, sans-serif;

If you read Japanese, you probably notice some repetition in that CSS. Referring once again to StackOverflow user Akky’s answer:

Some old browsers could not understand those font names in English, some others do not recognize the names in Japanese, so it is safe to write both in Japanese and English.

Fun.