How to use Apple's new San Francisco font on a webpage
CssCss Problem Overview
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 @font-face is not the solution here.
Css Solutions
Solution 1 - Css
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/
Solution 2 - Css
None of the current answers including the accepted one will use Apple's San Francisco font on systems that don't have it installed as the system font. Since the question isn't "how do I use the OS X system font on a webpage" 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");
}
Solution 3 - Css
Last time tested: March 2018
To address the question
> How to use Apple's new San Francisco font on a webpage
font-family: -apple-system, system-ui, BlinkMacSystemFont;
or (even shorter):
font-family: -apple-system, BlinkMacSystemFont;
should suffice.
If you want to default to system font on multiple platforms, though, I'd suggest:
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;
-apple-system— San Francisco in Safari (on Mac OS X and iOS); Neue Helvetica and Lucida Grande on older versions of Mac OS X.system-ui— default UI font on a given platform.BlinkMacSystemFont— equivalent of-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 following issue on github.
You can look up fonts for other OS or older versions of them in this article on css-tricks.
Solution 4 - Css
-apple-system allows you to pick San Francisco in Safari. BlinkMacSystemFont is the corresponding alternative for Chrome.
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
Roboto or Helvetica Neue could be inserted as fallbacks even before sans-serif.
https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a (how or previously http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/ do a great job explaining the details.
Solution 5 - Css
If the user is running El Capitan or higher, it will work in Chrome with
font-family: 'BlinkMacSystemFont';
Solution 6 - Css
This is an update to this rather old question. I wanted to use the new SF Pro fonts on a website and found no fonts CDN, besides the above noted (applesocial.s3.amazonaws.com).
Clearly, this isn't an official content repository approved by Apple. Actually, I did not find ANY official fonts repository serving Apple fonts, ready to be used by web developers.
And there's 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/ - it states in the first few paragraphs very clearly:
> [...]you may use the Apple Font solely for creating mock-ups of user > interfaces to be used in software products running on Apple’s iOS, > macOS or tvOS operating systems, as applicable. The foregoing right > includes the right to show the Apple Font in screen shots, images, > mock-ups or other depictions, digital and/or print, of such software > products running solely on iOS, macOS or tvOS.[...]
And:
> Except as expressly provided for herein, you may not use the Apple > Font to, create, develop, display or otherwise distribute any > documentation, artwork, website content or any other work product.
Further:
> Except as otherwise expressly permitted [...] (i) only one user may use the Apple Font at a time, and (ii) you may not make the Apple Font available over a network where it could be run or used by multiple computers at the same time.
No more questions for me. Apple clearly does not want their Fonts shared across the web outside their products.
Solution 7 - Css
You can not use Apple System Font served directly from a database. It's against the License, but you can use this for Mac Systems higher than High Sierra
body
{
font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}
Or you can use this:
font-family: 'BlinkMacSystemFont';
Solution 8 - Css
Apple is abstracting the system fonts going forward. This facility uses new generic family name -apple-system. So something like below should get you what you want.
body
{
font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}
Solution 9 - Css
Last tested in 2015
Should use this solution as a last choice, when other solutions don't work.
Original answer:
Work on macOS Chrome/Safari
body { font-family: '.SFNSDisplay-Regular', sans-serif; }
Solution 10 - Css
try this out:
font-family: 'SF Pro Text',-apple-system,BlinkMacSystemFont,Roboto,'Segoe UI',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
It worked for me. ;)
Do upvote if it works.
Solution 11 - Css
Basically, this is what worked for me:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
P.S. This works on all systems.