inorganik inorganik - 1 year ago 66
CSS Question

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

I'd like to use the new San Francisco font on a site. I've tried:

font: 'San Francisco', Helvetica, Arial, san-serif;

to no avail. I have tried the answers to this question, but
is not the solution here.

Answer Source

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: -apple-system-body
font: -apple-system-headline
font: -apple-system-subheadline
font: -apple-system-caption1
font: -apple-system-caption2
font: -apple-system-footnote
font: -apple-system-short-body
font: -apple-system-short-headline
font: -apple-system-short-subheadline
font: -apple-system-short-caption1
font: -apple-system-short-footnote
font: -apple-system-tall-body

You can demo these on the Safari nightly build in El Capitan here:

I got my info from Craig Hockenberry's article which has a lot of great info about using the font:

Also, some great info on the Surfin' Safari blog about using abstracted system fonts:

And apparently Apple is working with the W3C to standardize using a generic "system" font name in CSS.

Download the SF font .otf files for your own personal use:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download