# What's this about?

OS X 10.11, aka El Capitan, comes with a new system font for Chinese users, named [PingFang](http://www.apple.com/osx/elcapitan-preview/#international), 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](https://developer.apple.com/resources/), otherwise you can wait for [their public beta](http://beta.apple.com/) 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](https://support.apple.com/en-is/HT201722) 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](https://gist.github.com/kayahr/2479682).
2. Now to get Windows compatible TrueType files, use [CrossFont](http://www.acutesystems.com/scrcf.htm), 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](http://fontforge.github.io/en-US/) 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](http://en.wikipedia.org/wiki/TrueType#Embedding_protection) flag to `0`, for it to work on browsers like Internet Explorer. Using [ttembed-js](https://github.com/thegregorator/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](http://bluejamesbond.github.io/CharacterMap/) and [opentype.js font inspector](http://nodebox.github.io/opentype.js/font-inspector.html) 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/](https://mai3.me/), the main content is using `PingFang` by default.

Let me ([@bitinn](https://twitter.com/bitinn)) know if there is anything amiss.