Can I install SF fonts on iPhone?

I use Adobe XD on Mac, and my iPhone X is connected to the computer by cable. I use Adobe XD app on my iPhone to see "Live Preview" of my design on the iPhones screen. Issue is this: When I use Apples SF symbols, it's question mark on the iPhone screen. So... What to do?

Replies

to see "Live Preview"
When I use Apples SF symbols

See: https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

IMPORTANT
All SF Symbols shall be considered to be system-provided images as defined in the Xcode and Apple SDKs license agreements and are subject to the terms and conditions set forth therein. You may not use SF Symbols — or glyphs that are substantially or confusingly similar — in your app icons, logos, or any other trademark-related use. Apple reserves the right to review and, in its sole discretion, require modification or discontinuance of use of any Symbol used in violation of the foregoing restrictions, and you agree to promptly comply with any such request.


Devs can only use SF Font/Symbols (don't conflate the two, BTW) when doing UI mockups - not sure a 'live preview' qualifies, perhaps more like a static design, say in Adobe or on a bar napkin...
Just to be clear, app developers can use San Francisco font in their app using the systemFont APIs. You just can't download the font from Apple and install it in your app.
Downloading the font can only be used for mockups, which graphic designers need to do when developing UI in Sketch, etc.

That said, why the live preview show correct fonts/symbols with Adobe XD is something you should bring up with Adobe.
Yes, this is silly not to be able to preview your designs with the correct symbols on the device. Especially since Apple encourages you to use their SF Symbol font in your apps.

All is not lost however. Just use the SF Symbols font as you normally do in Adobe XD. Since the font is all icons, it might make sense to make each icon a component, and just reuse that throughout your design. Then go ahead and edit the symbol in the component and convert to paths.

Here's how in case you don't remember: With the text object you want to convert selected, choose Object > Path > Convert to Path,
or press Cmd+8 (Mac) or Ctrl+8 (Windows).

Now when you preview on your device, it will look correct.
  • Great advice. I just ran into this issue when practicing a demo I'm about to do. I convert all my icons to path for easier handling, but had grabbed some UI from Apple's XD kit, which uses SF Pro for things like chevrons.

Add a Comment
Install via a third party app such as iFont (personal favorite, the most stable). Yes, SF is obviously a part of iOS, but it's not accessible for whatever reason inside any content-creation app such as Pages or Keynote (probably the team doesn't want people using it in their personal documents because of LiCenSinG iSsUeS), and XD follows this mantra and doesn't incorporate SF into their app (but it's certainly not illegal to do so, Noto, for example incorporates and allows users to choose SF or SF Rounded for their font). Getting SF Pro installed via iFont as it's own font lets you use it in all apps thorough the system