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

Question

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 ha

Answer 1

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