How to use Apple’s new San Francisco font on a webpage

by

Apple’s new system font is not publicly exposed. Apple has started abstracting system font names:

The motivation for this abstraction is so the operating system can make better choices on which face to use at a given weight. Apple is also working on font features, such as selectable “6″ and “9″ glyphs or non-monospaced numbers. It’s my guess that they’d like to bring these features to the web, as well.

Safari and Firefox use SF for -apple-system; Chrome recognizes BlinkMacSystemFont:

body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

There are also other variations:

font-family: -apple-system-body
font-family: -apple-system-headline
font-family: -apple-system-subheadline
font-family: -apple-system-caption1
font-family: -apple-system-caption2
font-family: -apple-system-footnote
font-family: -apple-system-short-body
font-family: -apple-system-short-headline
font-family: -apple-system-short-subheadline
font-family: -apple-system-short-caption1
font-family: -apple-system-short-footnote
font-family: -apple-system-tall-body

You can demo these at the following fiddle; most are not supported yet: http://jsfiddle.net/v94gw9nx/

I got my info from Craig Hockenberry’s article which has a lot of great info about using the font:
http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

Also, some great info on the Surfin’ Safari blog about using abstracted system fonts: https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/

And apparently Apple is working with the W3C to standardize using a generic “system” font name in CSS. https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

Download the SF font .otf files for your own personal use: https://developer.apple.com/fonts/

Leave a Comment