React-native: [Text] Programmatically get the default font family (San Francisco vs. Helvetica Neue)

[ide]

Currently Helvetica is hard-coded in a couple places. We should instead get the system's font programmatically.

[paramaggarwal]

Here are all the places where Helvetica is mentioned in code. Currently, it creates a font by name if no family is provided, it should instead modify the fontDescriptor of the systemFont. See this highlighted code.

[dalinaum]

I know how can I get Helvetica from system (systemFontOfSize). But I don't know how can I get Helvetica Neue font from system. Please show me how.

[paramaggarwal]

On iOS 7, on the device itself, running systemFontOfSize should give you Helvetica Neue, right? Maybe you tried it in Simulator, hence Mac, and hence got Helvetica? Just a thought.

Anyways, it doesn't matter what font the system gives here. The point is to use systemFont by default, irrespective of what that font might actually be.

[nicklockwood]

@paramaggarwal The system font has changed to San Francisco in iOS 9.

@ide I'm thinking we should add a virtual font name called "System" that defaults to whatever the current system font is. Does that work for you?

I'll consider making this the default instead of Helvetica, but this may break existing apps.

[ide]

@nicklockwood I think we want the notion of a system font for a given size, which includes the font name and other typographical defaults that Apple has configured. This includes options like how colons are formatted in timestamps -- when rendering 9:45AM, the colon should be vertically raised. I haven't tested it but I believe that these options are configured when you call [UIFont systemFontWithSize:] but aren't when you create a new UIFont with the same family.

Additionally we'll want to expose these new options to JS. One example is the monospaced digits options -- with the new SF font, digits are no longer monospaced (instead they are naturally spaced so that "1" is thinner than "5" for example), but for UI elements like incrementing counters you want the monospaced digits.

And of course there's the font name vs. font family distinction. I believe we want to encourage use of font families so that the OS picks the appropriate font for the given size. For the SF font, there's a Display cut and a Text cut, where Display is intended for larger sizes.

I wasn't able to find the new font options in the prerelease docs yet but Session 804 (2015) covers most of this.

[nicklockwood]

@ide that's why I'm proposing we have a virtual "System" font name/family to specify that you want to use the system defaults for all these attributes.

[ide]

@nicklockwood Making sure I understand your idea... so style={{fontFamily: 'System', fontWeight: 'bold', fontSize: 48}} on iOS9 would render SF with the Display cut and all the Apple preset options, while {fontFamily: 'San Francisco', fontWeight: 'bold', fontSize: 48} wouldn't have the Apple presets?

[nicklockwood]

@ide exactly.

[ide]

That sounds really good.

[nicklockwood]

👍

[paramaggarwal]

@nicklockwood @ide, great points. Linking to the WWDC talk for anyone interested in what all has changed: Introducing the New System Fonts

[dalinaum]

:+1: I just pushed the new commit that supports a virtual fontName System. #1635

[haruair]

:+1:

[paramaggarwal]

@dalinaum So I'm not sure what is the correct way, to do this - so can't suggest modifications but I did watch Introducing the New System Fonts, and in it they say that fetching familyName from systemFont is not the same as using the systemFont itself as all the other OS level stuff is lost. In the talk they mention using systemFont and then fetching the fontDescriptor and modifying it.

Again, sorry for giving feedback without being able to suggest code modifications. :smile:

[chirag04]

Fix for this already landed in master it seems. please reopen if i'm wrong.

[nicklockwood]

Yeah, this is fixed.

[dapetcu21]

So, is there a way to get monospaced digits now?

[ide]

@dapetcu21 I believe that's not supported -- your best bet is rendering <Text> components for each digit that are positioned and spaced evenly.

[vikeri]

@dapetcu21: For me it worked to set fontFamily to Helvetica Neue. Of some reason the San Francisco font does not work for me.

[f0rr0]

What about variants of San Francisco? https://github.com/AppleDesignResources/SanFranciscoFont

[pavloko]

I have the same question as @f0rr0. Is there a way to choose between Display and Text variants of the San Francisco font?

[a3diti]

Same here, what about using the variants or semibold.
Here is a solution if you want variants of San Francisco Font like SF Pro Text/Display Light/Semibold etc.
After downloading and installing San Francisco fonts from apple website export them by selecting desired fonts from Font Book app of MAC OS X and then File>Export fonts, save them on your project
To use the otf files exported as assets, link them using rnpm at packages.json like this:

"rnpm": {
   "assets": ["./path-to-your-fonts-inside-project"]
}

and run react-native link command to automatically import assets to xcode in order for react-native recognising the new fonts (it generates an array at Info.plist for current fonts as assets).
Then use fonts at your react native project like those examples:

fontFamily: "SFProText-Regular"
fontFamily: "SFProText-Light"
fontFamily: "SFProText-Medium"
fontFamily: "SFProText-Semibold"
fontFamily: "SFProDisplay-Regular"
fontFamily: "SFProDisplay-Light"
fontFamily: "SFProDisplay-Medium"
fontFamily: "SFProDisplay-Semibold"

Note: If you delete font files you need to edit manually the Info.plist file and remove the corresponding lines with filenames of the font files. You also need remove those fonts from xcode>myTarget>Build Phases>Copy Bundle Resources