How do I add SF UI Display + Text fonts to prototype for IOS9? (San Francisco Mac System Font)

Elements Typography
1

I am prototyping an IOS 9 UI with Hype. How do I use/add Apple’s new SF UI font? (I have downloaded/use the font on my Mac).

2

BTW Here’s our documentation on adding fonts.

Here’s a nice article that covers how to use the font: http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

(Note: for a more updated guide (Feb 2018) to generating custom fonts with Font Squirrel, see this post.)

Also note that Hype now allows you to select a ‘System Font’. See this post. Continue reading for generic information on how to use downloaded font files in your Hype document and target those fonts with CSS:

So I downloaded the font files for this font from here: https://github.com/supermarin/YosemiteSanFranciscoFont

I then ran one of them through ‘Font Squirrel’ and generated a font package: webfontkit-20150903-112123.zip (131.6 KB)

I then took a look at stylesheet.css that Font Squirrel created, and copied everything from it. I modified it slightly:

Screen Shot 2016-03-30 at 1.47.14 PM.png2214×768 158 KB

I added this:

<style>
@font-face {
    font-family: 'sfns_displayregular';
    src: url('${resourcesFolderName}/system_san_francisco_display_regular-webfont.eot');
    src: url('${resourcesFolderName}/system_san_francisco_display_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('${resourcesFolderName}/system_san_francisco_display_regular-webfont.woff') format('woff'),
         url('${resourcesFolderName}/system_san_francisco_display_regular-webfont.ttf') format('truetype'),
         url('${resourcesFolderName}/system_san_francisco_display_regular-webfont.svg#sfns_displayregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
</style>

I use the ${resourcesFolderName} variable to ensure that the font files are loaded from the resource folder of my Hype document. And I made sure that sfns_displayregular was the Font-family used when selecting that font.

Here’s the example file:

SF Font Example.zip (136.4 KB)

When El Capitan comes out and you want to use this font testing locally, you can use font-family: -apple-system;, but if you want others to see it, you’ll need to use the method above.

5 Likes
3

Wow! Thank-you so much!

4

5 posts were split to a new topic: Google Fonts: Local Font Files for Chinese Language)

5

Note that Hype v3.5 (released a couple months after this post in Dec 2015) introduced a way to easily include the system font:

44%20AM

This is an equivalent to CSS:

font-family: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", Helvetica, Arial, sans-serif;

Therefore for most cases you will not need to manually include the SF font.