Typefaces are like “the clothes that words wear,” as simply put by the typeface designer Tobias Frere-Jones.

There are often cases when we wish to use the system typefaces on web. Sometimes it could be the need to match the content with the context and sometimes a mere desire (backed by certain requirements). Roboto on Android, San Francisco on Macs and iPhones (&  Watch), and Segoe UI on Windows, these typefaces provide an interesting alternative to web typography. The biggest plus is that these typefaces don’t require a web-font delivery service or font files to be downloaded on users’ machine, hence zero latency.

However implementing these is not easy as it could be. Here’re few approaches which we explored recently.

## Approach I

font: caption;

This would do the job by setting the typefaces on the web page to the respective system defaults, i.e., on Ubuntu it would serve Ubuntu Font, on Yosemite it would be Helvetica Neue, on El Capitan it would render San Francisco, on Windows XP Tahoma, on newer Windows serving Segoe UI and on Android it would be Roboto.

However, this approach is inconsistent on iOS. To make it work you can take help of UA Sniffing, which is usually discouraged

Apart from inconsistent behaviour on iOS, this approach doesn’t use the “smart” properties of San Francisco typeface — switching from San Francisco Text to San Francisco Display automatically for text over 20 pixels and adjust the letter spacing. Further reading.

## Approach II

font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, sans-serif;

This approach is more consistent compared to the previous approach. However the Firefox support is yet to arrive.

Let’s go through the details of this approach.

-apple-system is for targeting the San Francisco typeface in Safari on Mac and iOS (Helvetica Neue and Lucida Grande on older Macs). It also switches intelligently between San Francisco Text and San Francisco Display depending on the text’s size.

BlinkMacSystemFont does the same thing for Chrome on Mac.

Segoe UI, Roboto, Oxygen and rest in the declaration target their respective operating systems. In case everything fails, we still have sans-serif as the default fallback.

As mentioned earlier, this doesn’t yet work in Firefox on El Capitan and is expected to get fixed by December 2015.

If you don’t want to rely on the “smart” properties of San Francisco typeface, you can manually use .SFNSText-Regular or .SFNSDisplay-Regular in the font-family declaration. This is the internal PostScript name for San Francisco in Mac OS X. However it only works in Chrome and is thought to be less versatile than BlinkMacSystemFont.

Further reading.