HACKINTOSH.ORG | Macintosh discussion forums

Using the Apple system font in your web content

<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>Coming with iOS 9 (http://www.imore.com/ios-9-first-look) and OS X El Capitan (http://www.imore.com/os-x-el-capitan-first-look) is the new Apple system font, San Francisco (technically the SF branch). If you make web apps or use web views and want to make sure they match, there's some good news coming your way. Myles Maxfield on Surfin' Safari (https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/):</p>

<p>Web content is sometimes designed to fit in with the overall aesthetic of the underlying platform which it is being rendered on. One of the ways to achieve this is by using the platform's system font, which is possible on iOS and OS X by using the "-apple-system" CSS value for the "font-family" CSS property. On iOS 9 and OS X 10.11, doing this allows you to use Apple's new system font, San Francisco. Using "-apple-system" also correctly interacts with the font-weight CSS property to choose the correct font on Apple's latest operating systems.</p>

<p>Browsers that don't support -apple-system will simply grab the next font specified in the property list.</p> <p>San Francisco is gorgeous, and a more consistent way to display it throughout apps and the web is just terrific.</p> </div></div></div><br clear='all'/>

<a href="http://rc.feedsportal.com/r/234566380924/u/49/f/616881/c/33998/s/488d54c4/sc/28/rc/1/rc.htm" rel="nofollow"><img src="http://rc.feedsportal.com/r/234566380924/u/49/f/616881/c/33998/s/488d54c4/sc/28/rc/1/rc.img" border="0"/>[/url]

<a href="http://rc.feedsportal.com/r/234566380924/u/49/f/616881/c/33998/s/488d54c4/sc/28/rc/2/rc.htm" rel="nofollow"><img src="http://rc.feedsportal.com/r/234566380924/u/49/f/616881/c/33998/s/488d54c4/sc/28/rc/2/rc.img" border="0"/>[/url]

<a href="http://rc.feedsportal.com/r/234566380924/u/49/f/616881/c/33998/s/488d54c4/sc/28/rc/3/rc.htm" rel="nofollow"><img src="http://rc.feedsportal.com/r/234566380924/u/49/f/616881/c/33998/s/488d54c4/sc/28/rc/3/rc.img" border="0"/>[/url]

<img src="http://da.feedsportal.com/r/234566380924/u/49/f/616881/c/33998/s/488d54c4/sc/28/a2.img" border="0"/> (http://da.feedsportal.com/r/234566380924/u/49/f/616881/c/33998/s/488d54c4/sc/28/a2.htm)<img width="1" height="1" src="http://pi.feedsportal.com/r/234566380924/u/49/f/616881/c/33998/s/488d54c4/sc/28/a2t.img" border="0"/><img width='1' height='1' src='(http://tipb.com.feedsportal.com/c/33998/f/616881/s/488d54c4/sc/28/mf.gif)' border='0'/><img src="http://feeds.feedburner.com/~r/TheIphoneBlog/~4/JF10TdBo1JM" height="1" width="1" alt=""/>

Source: Using the Apple system font in your web content (http://feedproxy.google.com/~r/TheIphoneBlog/~3/JF10TdBo1JM/story01.htm)