Localized Font Names

Fonts can have more than one name ie names localized to more then one language. In this post I am going to examine the use of fonts that have two language localizations for their names, English and Chinese. The specific fonts I am using are some Chinese fonts newly included in OSX Mavericks:

English Name	Chinese Name
HanziPen SC	翩翩体-简
Wawati SC	娃娃体-简
Xingkai SC	行楷-简
Yuppy SC	雅痞-简

My aim is to determine whether or not Browsers can select and use fonts by their, in this case, Chinese names. Here is the relevant html code:

<p style="font-family:'HanziPen SC'">

1a 拉夫堡，莱斯特，伦敦。</p>

<p style="font-family:'翩翩体-简'">

1b 拉夫堡，莱斯特，伦敦。</p><hr />

<p style="font-family:'Wawati SC'">

2a 拉夫堡，莱斯特，伦敦。</p>

<p style="font-family:'娃娃体-简'">

2b 拉夫堡，莱斯特，伦敦。</p><hr />

<p style="font-family:'Xingkai SC'">

3a 拉夫堡，莱斯特，伦敦。</p>

<p style="font-family:'行楷-简'">

3b 拉夫堡，莱斯特，伦敦。</p><hr />

<p style="font-family:'Yuppy SC'">

4a 拉夫堡，莱斯特，伦敦。</p>

<p style="font-family:'雅痞-简'">

4b 拉夫堡，莱斯特，伦敦。</p>

The text is in pairs labelled a and b. A Browser that recognises both the English and Chinese names for a font will render a and b text identically as it will be using the same font. A Browser that does not recognise the Chinese name will use a substitute font and hence a and b text will appear differently. It is expected that a Browser will always recognise an English font name but, as will demonstrated, Chinese font names are often not recognised. Figure 1 shows correct Browser behaviour and Figure 2 shows incorrect browser behaviour.

Figure 1: Correct Browser Behaviour, strings a and b rendered with same font

Figure 2: Incorrect Browser Behaviour, strings a and b rendered with different fonts

I tested with Chrome (31.0.1650.63), Firefox (v26.0) and Safari (v7.0.1). Test OS was OSX Mavericks 10.9.1. Only Firefox worked correctly!!! My OSX localization for the tests was English. I did switch my OSX to Chinese and repeated my tests but the results were the same.

Here is what W3C have to say in CSS Fonts Module Level 3 w3.org/TR/css3-fonts/#font-family-prop: "Some font formats allow fonts to carry multiple localizations of the family name. User agents must recognize and correctly match all of these names independent of the underlying platform localization, system API used or document encoding"

So, in due course, all Browsers should work with all Localized Font Names. As evidenced by my tests, that is not yet the case. So, what do we do in the meantime. I am with Kendra Schaefer's (www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/) recommendations, which is to include all the Localized Font names in the font-family declaration eg

font-family: "Yuppy SC", "雅痞-简", sans-serif;