San Francisco font not available

Today I installed the Apple San Francisco fonts. Sadly I cannot see them in the Hype dropdown list.
Affinity shows them. What to do?

By default they’re not going to be there even It’s installed with fontbook. In order to use it you must add the font to your assets and then choose a custom font.

More info can be found here

2 Likes

Note that "Apple System Font" in the Typography panel would be San Francisco on any modern Mac/iOS device.

Otherwise as @petester says, you'll need to add a custom font. If it is intended to run on machines where the font may not be installed, like the web, you should add the font files to the Resources Panel first. Be sure the font's license allows this. Otherwise if it is a controlled environment where you know SF will be installed, you can use the local() syntax for the font CSS (described on the MDN font-face page).

Do I understand you correctly? I already have the SF font since the Apple System font is the same?

Yes, basically. There are many variants of San Francisco, but if you're looking for the default one used in UI, then you do have it installed already (since that's how the UI uses it!). Apple doesn't include it in the Font Book though I am not sure why; it could be due to how they want it licensed/used?

Regardless, browsers are able to access it, and that's what Hype does for the "Apple System Font" item in the font family panel.

1 Like

As I’m writing, I kind of feel uneasy for hype to even distribute that one variant or two if you count bold making it available at all as a “system font” since it’s Apples font and they have a bunch of rules/guidelines for when to use it and who is allowed to use for what purpose other than for Apple.
I’m sure you looked into it before adding it, haven’t you? I feel like you should have a disclaimer saying something along the lines of “use the font for testing and follow the guidelines that Apple set in place using the San Francisco font”.

We don't distribute the font, we allow you to use the 'system' font family. Here's more info on the font from the Webkit team: https://webkit.org/blog/3709/using-the-system-font-in-web-content/

More on the system font family, and what is uses on different operating systems: https://css-tricks.com/snippets/css/system-font-stack/

But, yes it looks like there are specific purposes you are allowed to use the font for.

But yeah.... In the font terms of service it is only for mockups by registered developers.

"A. Limited License. Subject to the terms of this License, you may use the Apple Font solely for creating mock-ups of user interfaces to be used in software products running on Apple’s iOS, iPadOS, macOS or tvOS operating systems, as applicable. The foregoing right includes the right to show the Apple Font in screen shots, images, mock-ups or other depictions, digital and/or print, of such software products running solely on iOS, iPadOS, macOS or tvOS. Your use of the Apple Font shall also be subject to any specific use restrictions with respect thereto as set forth in the Apple Font or Apple’s Human Interface Guidelines. You may use this Apple Font only for the purposes described in this License and only if you are a registered Apple Developer, or as otherwise expressly permitted by Apple in writing."

1 Like

By "distribute" I meant "use" the system font, in a sense you're making it available for everyone to use regardless of what its meant for. Some people don't realize they're breaking guidelines by you making it available for use. Not that Apple is going to come knocking at your door anytime soon with a law suit g-d forbid though these days you never know.

I think it would be a legal stretch to say guidelines/laws are being broken for using the local system font via "Apple System Font" in Hype's typography inspector.

Apple explicitly encourages its use and says:

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.

If you are an app developer, you likewise choose "system font" and that is entirely okay... in fact if apps couldn't use the system font there'd be tremendous consistency problems. The system font is there for a reason!

Apple's OS license on fonts says:

E. Fonts. Subject to the terms and conditions of this License, you may use the fonts included with the Apple Software to display and print content while running the Apple Software; however, you may only embed fonts in content if that is permitted by the embedding restrictions accompanying the font in question. These embedding restrictions can be found in the Font Book/Preview/Show Font Info panel.

You are not embedding San Francisco by specifying the usage of the system font. (Further does not appear in the Font Book/Preview/Show Font Info panel, though that seems besides the point).

Licensing is only being broken if you download the San Francisco font files from Apple's developer site (or grab from other means like taking the files installed on the system) and use or redistribute them for purposes other than Apple platform mockups.

I think the heart of it is they don't want San Francisco to show up ever on Android or Windows (on apps or websites).

1 Like

I’m glad you looked into it.

Some related & interesting reading on System fonts:

1 Like