How to Use Apple's New San Francisco Font on a Webpage

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

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/

How to render native macOS fonts in Chrome

See the following StackOverflow thread regarding the subject of using the MacOS system fonts in Google Chrome/Chromium browsers: How to use Apple's new San Francisco font on a webpage

Unfortunately, it appears that the only way to truly do this is by referencing it as a webfont. Using this font in a production website or application outside of MacOS, iOS, or other Apple platforms is a violation of their font's licensing. I attempted to use the available solutions to render the font on Chromium without success.

[UPDATE 4/24/2020] Article references known issue with adjusting the font-weight of System Font references for Catalina users : https://www.coywolf.news/webmaster/chrome-81-breaks-system-fonts-bold/

CSS Tricks also comments on the issue of proper System Font rendering. Looks like Chrome version 83 in mid-May will hopefully fix the issues: https://css-tricks.com/chrome-system-fonts-snafu/

Let iOS pick the System Font Helvetica Neue or San Francisco in CSS

on iOS and OS X by using the “-apple-system” CSS value for the “font-family” CSS Property.

As noted on webkit.org, there are currently discussions in the w3c regarding standardizing this value so authors could simply specify system.

System Font

-apple-system on iOS 9 & Safari OS X 10.11

Using font-family: CSS Property:

font-family: -apple-system;
font-family: '-apple-system','HelveticaNeue'; // iOS 8 compatible, credit: @MarcoBoschi

In context (fallback to HelveticaNeue when -apple-system is undefined):

<html>
<head>
<style type=\"text/css\">
    body{font-family: '-apple-system','HelveticaNeue'; font-size:17;}
</style>
</head>
<body></body>
</html>

Weight & Style

Using font-weight: CSS Property:

normal, bold, bolder, lighter
100, 200, 300, 400, 500, 600, 700, 800, 900

Using font-style: CSS Property:

normal, italic

Dynamic Font

-apple-system-xxx on iOS 8.4.

Using font: CSS Property (represent an entire style, including size and weight):

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

In context:

<html>
<head>
<style type=\"text/css\">
    body{font: -apple-system-body;}
</style>
</head>
<body></body>
</html>

Sample Image

► Find this solution on GitHub and additional details on Swift Recipes.

San Fransisco Arabic Web Font for Windows

OK, I finally found the font, it is called Geeza Pro, I have extracted it from OSX fonts folder and sent it to http://fontface.me, they uploaded it to their CDN, everyone can use OSX's Arabic font now from this link:

https://www.fontface.me/font/info/geeza-pro

Simply include this in header:

<link rel="stylesheet" type="text/css" href="//www.fontstatic.com/f=geeza-pro" />

CSS:

font-family: 'geeza-pro';

Thanks for everyone for the comments.

Using -apple-system for monospace and serif

Starting from Safari 13.1, they added font family names for system fonts:

ui-monospace — SF Mono
ui-serif — New York
ui-sans-serif — San Francisco (same as system-ui and -apple-system)

See the blog post.

The CSS I use to get the system monospace on most platforms is as follows:

code {
  font-family: 'SF Mono', SFMono-Regular, ui-monospace,
    'DejaVu Sans Mono', Menlo, Consolas, monospace;
}

The first three are SF Mono, then the Bitstream Vera-derived fonts on Linux (DejaVu) and Mac (Menlo), closing with whatever works on Windows (Consolas).

How to Use Apple's New San Francisco Font on a Webpage