Notes on using OS X 10.11’s new Chinese font: PingFang (苹方/萍方)

(credit: grouse01)

Let’s talk about the new, aptly named font from Apple.

What’s this about?

OS X 10.11, aka El Capitan, comes with a new system font for Chinese users, named PingFang, it includes 6 weights for both Simplified and Traditional Chinese glyphs. The same font also appear on iOS 9 as the default UI font, though Apple didn’t mention it explicitly.

How to get it?

If you are in Apple Developer Program (costs 99 USD a year), then you can get them now at their developer resource site, otherwise you can wait for the public beta to come out in July or wait longer for the public release this fall (a free upgrade like previous release).

Or you can get PingFang.ttc from your developer friends, though you are probably violating its font license one way or another, but I am not a lawyer so freedom to you.

What’s it good for?

1. More and distinctive font weights are a welcome change, given previous default Heiti only offer 2 weights and its medium weight just doesn’t cut it when you need proper bold text.
2. Better design in general, Heiti had been the default font for a long time and its appearance, especially on the web, is subpar at best.
3. One more choice for Chinese fonts, when it comes to iOS Safari, Heiti used to be our only choice, now there is pleasing alternative, should you need a font that works better with Latin letters.

How to use it?

If you are on iOS 9 or OS X 10.11, it’s already there. Otherwise install PingFang.ttc via Font Book.

Note that you won’t be able to see it appearing in the Font Book, why? Because its actual name is .PingFang + SC/TC, the leading dot signify itself as a system fallback font, hence Font Book is not giving us its preview.

Update 2015-06-24: Developer Preview Beta 2 (DP2) removed the leading dot from PingFang fonts, it’s now able to show up in Font Book.

You can find them under ~/Library/Fonts with manual install, otherwise it’s likely under /System/Library/Fonts/, but see Apple KB for better explanation.

Windows users

Making font works cross-platform is the Holy Grail of font conversion, especially for fonts designed with only OS X in mind.

Because Apple and Microsoft can’t agree on a standard for TrueType, There are 2 different ways to set font tables for ttf (TrueType/OpenType) and ttc (TrueType Collection), so you need some conversion tools to make PingFang.ttc work on Windows.

1. To unpack TrueType Collection into TrueType files for individual font weight, use this ttc2ttf python port.
2. Now to get Windows compatible TrueType files, use CrossFont, it’s a commercial ware but comes with free trial. I would love to see an open source alternative that requires minimal setup to get this conversion done. I tried FontForge scripting with simple Open/Generate but didn’t see a way to set them to use Windows compatible font tables.
3. Lastly but optionally, if you somehow want to subset PingFang and embed it on a webpage, note that you should change its fsType, aka Embedding Protection flag to 0, for it to work on browsers like Internet Explorer. Using ttembed-js you can easily achieve that, but this is very likely a violation of font license.

On the web

While PingFang (苹方／萍方) is the new default for OS X and iOS UI, Safari still default to Heiti on the web, presumably to maintain backward compatibility. However, as a developer you can make use it today.

The simple way:

font-family: ".PingFang-SC-Regular", sans-serif;

The complex-but-give-you-more-control way:

font-family: ".PingFang SC", sans-serif;

@font-face {
    font-family: ".PingFang SC";
    font-weight: 500;
    src: local(".PingFang-SC-Medium");
}

@font-face {
    font-family: ".PingFang SC";
    font-weight: 400;
    src: local(".PingFang-SC-Regular");
}

@font-face {
    font-family: ".PingFang SC";
    font-weight: 300;
    src: local(".PingFang-SC-Light");
}

Using tools like CharacterMap and opentype.js font inspector you can figure out more about PingFang. But as a tip postScriptName under naming table is usually your safe bet for a cross-platform css font name.

Update 2015-06-24: for better backward compatibility we keep the dot in our CSS declaration, as doing that will work for both DP1 and DP2 fonts. However in the longrun it’s probably a good idea to just use PingFang SC instead. Also note that opentype.js doesn’t currently work with DP2 fonts (after extraction using ttc2ttf), shows TypeError: Cannot read property 'glyphIndexMap' of null.

Live demo

With PingFang installed or using OS X 10.11 / iOS 9, visit https://mai3.me/, our main content will be using PingFang.

Let me (@bitinn) know if there is anything amiss.

Markdown source and license for this article is on Github, originally written as a gist