How to use the new San Francisco font on a web page

Question

I would like to use the new San Francisco font on the site. I tried:

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

to no avail. I tried the answers to this question , but @font-face is not a solution here.

Answer 1

Apple's new system font has not been publicly disclosed. Apple began to abstract system font names:

The motivation for this abstraction is that the operating system can better choose which face to use for a given weight. Apple is also working on font features such as selectable “6” and “9” characters or non-local numbers. I think they would also like to introduce these features on the Internet.

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

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

There are other options:

 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 demonstrate them on the following violin; most of them are not yet supported: http://jsfiddle.net/v94gw9nx/

I got my information from an article by Craig Hockenberry, which has a lot of useful information about using the font: http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

In addition, the Surfin 'Safari blog has excellent information on using abstract system fonts: https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/

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

Download SF .otf files for personal use: https://developer.apple.com/fonts/

Answer 2

None of the current answers, including accepted, will use the Apple San Francisco font on systems where it is not installed as a system font. Since the question is not “how to use the OS X system font on a web page,” the correct solution is to use web fonts:

 @font-face { font-family: "San Francisco"; font-weight: 400; src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff"); } 

Source

Answer 3

-apple-system allows you to choose San Francisco in Safari. BlinkMacSystemFont is an appropriate alternative to Chrome.

 font-family: -apple-system, BlinkMacSystemFont, sans-serif; 

Roboto or Helvetica Neue can be inserted as backups even before sans-serif.

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a (as previously http://furbo.org/2015/07/09 / i-left-my-system-fonts-in-san-francisco / did a great job explaining the details.

Answer 4

Last tested: March 2018.

---

To resolve the issue

How to use the new Apple San Francisco font on a web page

 font-family: -apple-system, system-ui, BlinkMacSystemFont; 

or (even shorter):

 font-family: -apple-system, BlinkMacSystemFont; 

should be enough.

If you want to use the default system font on multiple platforms, I would suggest:

 font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu; 

• -apple-system - San Francisco on Safari (Mac OS X and iOS); Neue Helvetica and Lucida Grande in older versions of Mac OS X.
• system-ui - the default user interface font for this platform.
• BlinkMacSystemFont is the equivalent -apple-system for Chrome on Mac OS X.
• "Segoe UI" - Windows (Vista +) and Windows Phone.
• Roboto - Android (Ice Cream Sandwich (4.0) +) and Chrome OS.
• Ubuntu - all versions of Ubuntu.

The idea is borrowed from the next release on github .

You can find fonts for other OS or older versions in this article on css-tricks .

Answer 5

If a user launches El Capitan or higher, he will work in Chrome with

 font-family: 'BlinkMacSystemFont'; 

Answer 6

Apple will abstract system fonts in the future. This object uses the new generic surname -apple-system. So, something like below should get what you want.

 body { font-family: -apple-system, "Helvetica Neue", "Lucida Grande"; } 

Answer 7

Last tested in 2015

You should use this solution as a last resort when other solutions do not work.

---

Original answer:

Work on MacOS Chrome / Safari

 body { font-family: '.SFNSDisplay-Regular', sans-serif; } 

Answer 8

This is an update to this rather old question. I wanted to use the new SF Pro fonts on the website and did not find any CDN fonts other than the above (appleocial.s3.amazonaws.com).

It is understood that this is not an official content repository approved by Apple. In fact, I did not find any official font repository serving Apple fonts, ready for use by web developers.

And there is a reason - if you read the license agreement that comes with downloading the new SF Pro and other fonts from https://developer.apple.com/fonts/ , the first few paragraphs say very clearly:

[...] you can use Apple Font solely to create user interface mockups that will be used in software products running on Apples iOS, macOS or tvOS operating systems, as the case may be. The foregoing right includes the right to display Apple Font in screenshots, images, layouts or other images, digital and / or printed, of such software products that work exclusively on iOS, macOS or tvOS. [...]

AND:

Except as expressly provided herein, you may not use the Apple Font to create, develop, display, or otherwise distribute any documentation, illustrations, website content, or any other work product.

Further:

Unless otherwise expressly permitted [...] (i) only one user can use the Apple font at a time, and (ii) you cannot make the Apple font available over the network, where it can be used or used by multiple computers. in the same time.

No more questions for me. Apple clearly does not want their fonts distributed over the Internet outside their products.

Answer 9

TransType 4 is required to transcode SF PRO fonts for the web. Turn on loans for Apple fonts where you use fonts. Watch a video of the session to see how well-loaded SF fonts integrate with X-Code. Nothing to do with traditional web typography using Apple's SF fonts. When FontLab imports SF fonts, you can see that they are distorted for X-specific programming, explaining why raw fonts are not suitable for @fontface - TransType recovers 7359 glyphs for each SF PRO font variant, many of these special ones explained glyphs such as arrows. in the video. You must sort and rename each option into the correct style groups and the correct font weight. Then convert to regular TTF or regular OTF, then convert to WOFF and WOFF2. Your CSS code, see if this works.