The obvious way to use system fonts in CSS is to… just list all of the ones you can imagine by name:

font-family: "San Francisco", "Roboto", "Segoe UI";

(The way CSS works, if the first font is not present, the second one will be tried, and so on. Since it’s not common for an operating system to have more than one of these fonts installed, only one will be selected.)

We also need to take care of the older systems, including a fallback to use a generic sans serif font if nothing matches before:

font-family: "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;

However, turns out San Francisco is a bit of a magical font. It’s not installed the usual way, instead having a “secret” name. That name is:

font-family: ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;

Craig Hockenberry did some research and discovered that Apple very recently implemented a generic “just give me a system font” expression, so we added that, too:

font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;

And, since –apple– is a typical vendor prefix for an experimental feature, we included a more future-proof system as the first entry:

font-family: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;

Eventually, in the future, if other browsers implement the feature, a simple font-family: system will take care of everything, but in the interim, this should do.

We felt pretty good about all this and on October 7, we launched Medium 2.0 which included this change.