How to get UIFont for 'SF Pro Display' consistently?

Question

Created Jul ’20

Replies 1

Boosts 0

Views 9.9k

Participants 2

Hi! I'm an engineer creating ProtoPie, at Studio XID.

We are creating prototyping tool (like Framer), and our customers can

author app prototypes on our desktop app
play the app prototypes on our iOS app

Our desktop app is providing several font options commonly used, that contains

SF Pro Display
SF Pro Rounded
SF Pro Text
SF Compact Display
SF Compact Rounded
SF Compact Text

And I'm finding the ways to get UIFont instance for these fonts consistently. Our target version is iOS >= 10

I'm trying to get UIFont like

Code Block UIFont(name: ".SFProText-Regular", size: 19)

But it prints warning 'All system UI font access should be through proper APIs...'. I found it is old way and does not work in iOS 13.

And then, I tried

Code Block print(UIFont.systemFont(ofSize: 19).fontName)
print(UIFont.systemFont(ofSize: 20).fontName)

And both print '.SFUI-Regular'. I don't know what this font is. (SF Pro Display? SF Pro Text? or something?)

Is there any consistent way to get UIFont for those 6 fonts?

Thanks in advance!

Boost

Answer 1

doughill OP

Dec ’20

Hello,

Apple is making it very clear they don't want developers to access San Francisco font unless they use the approved system APIs. For example

Code Block UIFont.systemFont(ofSize: )

or

Code Block UIFont.preferredFont(style:)

Attempting to load the font by name is no longer supported, as the warning indicates. San Francisco font doesn't seem to show up in the list of enumerated installed fonts any more either.

There's kind of a good reason for this though. According to how San Francisco font should be used, you don't want to pick the font yourself. For example, Apple says the Text variant is for point sizes less than 21 point. To make that work in all scenarios is difficult if not impossible to replicate. See here for more info on how the system makes the determination on which font variant should be used based on size:

WWDC: Introducing the New System

So you probably shouldn't include Text and Display in a popup and just allow the user to pick it. As the app developer you need to make sure the correct variant is used.

There's also the question whether the app developer should arbitrarily choose the rounded or compact variants. I see that Apple has included the following in iOS 13:

Code Block UIFont.withDesign(design:)

That allows you to specify rounded variant but not compact. Apple says that compact is supposed to be for watch apps, so that's probably why it isn't made available on iOS.

I hope this gives you a better idea of how to use the San Francisco font.

Doug Hill
https://github.com/djfitz/SFFontFeatures

1