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

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.