Issue
I'd like to use Apple's 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.
Solution
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/
Answered By - inorganik
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.