A few notes on using OS X 10.11 (El Capitan)'s new Chinese font: PingFang (苹方／萍方).

note-on-osx-pingfang.md

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. 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 their public beta to come out in July or wait 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 distinctive font weights are a welcome change, given the 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, the Heiti had been the default font for a long time and its appearance, especially on the web, is subpar at best.
3. 1 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 the 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, thus Font Book is not giving us the preview.

But you can find them under ~/Library/Fonts with manual install, other 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, particularly for fonts designed with only OS X in mind.

Because OS X and Windows can't agree on a standard for TrueType, There are 2 different ways to set 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 each 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 only require minimal setup to get this conversion done. I tried FontForge script 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 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 by default, presumably to maintain backward compatibility.

However, as a FrontEnd designer 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 best bet for a cross-platform css font name.

Live demo

With PingFang installed or using OS X 10.11 / iOS 9, visit https://mai3.me/, the main content is using PingFang by default.

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