154

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.

Community
  • 1
  • 1
inorganik
  • 24,255
  • 17
  • 90
  • 114
  • 1
    Website fonts either depend on what's installed in the user's system or they are loaded externally. It's pretty straightforward stuff, especially if the font is made available for use. – Sparky Sep 18 '15 at 22:04
  • 1
    font-family: 'SF Pro Text',-apple-system,BlinkMacSystemFont,Roboto,'Segoe UI',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'; – shivambhanvadia Aug 25 '20 at 07:55

11 Answers11

265

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/

Basil Bourque
  • 303,325
  • 100
  • 852
  • 1,154
inorganik
  • 24,255
  • 17
  • 90
  • 114
  • 1
    or you can just use font names like `SanFranciscoText-Regular` –  Mar 27 '17 at 01:30
  • 4
    If need monospaced numbers for display in table, the `-apple-system` also supports this via CSS [`font-variant-numeric: tabular-nums;`](https://developer.mozilla.org/en/docs/Web/CSS/font-variant-numeric). – Palimondo Aug 19 '17 at 19:42
  • @j08691, What's the license? – Pacerier Nov 04 '17 at 13:11
  • Adding an update that you should go to the official download site for getting the San Francisco font: https://developer.apple.com/fonts/ – Doug Hill Nov 21 '17 at 18:23
  • 2
    This fiddle shows up entirely in Times New Roman. 10.13.2 here, Safari 11.0.2 (13604.4.7.1.3) – Steven Lu Dec 26 '17 at 00:33
  • 1
    @BryanBryce That was a hack for El Cap. It doesn't work anymore, I think it's called `.SF NS Text` and `.SF NS Display` now, but you shouldn't use those. I'd use `-apple-system`. `SF Text`/`SF Pro` work only if you have the font installed manually. –  Dec 11 '18 at 19:36
  • 1
    Apparently `-system-ui` is the new standard way on Chrome and Safari. (I didn’t want to steal credit from your awesome answer so I’m just putting this in the comments. https://furbo.org/2018/03/28/system-fonts-in-css/) – Wil Shipley Jun 30 '19 at 20:20
102

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");
}

Source

M4ver1k
  • 1,505
  • 1
  • 15
  • 26
Ilias Karim
  • 4,798
  • 3
  • 38
  • 60
  • 5
    If anyone wanted a bold one: sanfranciscodisplay-bold-webfont.woff – Snowbases Jun 03 '19 at 03:14
  • 62
    Note: **this answer violates Apple's font license terms**, which state that *"[...]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, iPadOS, macOS or tvOS operating systems, as applicable"*. – Teh Oct 10 '19 at 15:23
  • I've been searching for this link to figure out of what height letters in this font are, and I wish this answer was easier to find. – polkovnikov.ph Jun 18 '21 at 19:18
  • Is there any CDN that provides font version with cyrillic support? – VityaSchel Jan 05 '23 at 19:39
  • There are lots of sites using that font. For example, https://web.archive.org/web/20230108003247/https://linear.app/ – Anshuman Kumar Jan 14 '23 at 11:24
52

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.

  • Are you sure this is actually *San Francisco* that's being used for rendering on iOS? On iOS 12 (Simulator) does not look like it; on iOS 13 it looks like it, but [not all glyphs are available](https://codepen.io/fabswt/pen/mdyvYpx). – Fabien Snauwaert Jan 24 '20 at 01:09
  • 1
    @FabienSnauwaert, no I am not sure about iOS 12 and 13. That's why I added date to the top of the answer (i.e. the answer is more than 2 years old now, and was posted before iOS 12 was even announced). –  Apr 14 '20 at 07:36
28

-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.

Andreas Kwiatkowski
  • 389
  • 3
  • 3
11

If the user is running El Capitan or higher, it will work in Chrome with

font-family: 'BlinkMacSystemFont';
Benjamin
  • 455
  • 4
  • 7
11

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.

Jakob Hohlfeld
  • 1,503
  • 1
  • 17
  • 31
  • 4
    In the accepted answer you can see we aren't serving Apple webfonts, we're telling the browser to use the Apple system font, which currently is SF. You certainly can't serve SFPro, but you can specify it be used for people with Apple devices. – inorganik Sep 06 '19 at 15:54
8

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';
theroyakash
  • 143
  • 1
  • 4
6

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.

Community
  • 1
  • 1
shivambhanvadia
  • 487
  • 4
  • 7
5

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";
}
dors
  • 1,152
  • 11
  • 19
4

Last tested in 2015

Use this answer only if the other methods don't work.

Original answer:

Works on Mac OS Chrome/Safari

body { font-family: '.SFNSDisplay-Regular', sans-serif; }
Dev-Siri
  • 592
  • 5
  • 22
bumfo
  • 254
  • 3
  • 6
  • 1
    A code block alone does not provide a good answer. Please add explanations. – Louis Barranqueiro Dec 12 '15 at 13:47
  • 1
    This is the only one that worked for me on an Atom syntax stylesheet. – Kai Mar 21 '16 at 02:38
  • 2
    Note that this doesn't work in iOS while `-apple-system, 'BlinkMacSystemFont'` works in iOS Chrome + Safari and OS X Chrome + Safari. – Charlie Schliesser Aug 23 '16 at 21:07
  • It is a bad idea to ever reference the macOS/iOS system font names directly as they could change, requiring time and effort on your part when/if it happens. (Additionally, native apps that do this on iOS at least theoretically are supposed to crash. Moral: don’t do it.) – Jonathan Thornton Dec 18 '17 at 22:29
  • 1
    Also, I should point out that the reason that this doesn’t work on iOS is because the system fonts begin with .SFNS on macOS while they begin with .SFUI on iOS. If you **absolutely must** do this for some reason, that’d fix it…but don’t do it! – Jonathan Thornton Dec 18 '17 at 22:31
  • 1
    thanks, I have applied it to SF font and is working great. Problem with -apple-system is applied in all content, and override style of font-family. – Hardik Darji Mar 08 '18 at 11:21
3

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.

Ruben Helsloot
  • 12,582
  • 6
  • 26
  • 49
Lyam Dexter Mosnier
  • 77
  • 7