iOS: Cannot Use specific font weight of custom font

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
      Memory: 957.13 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 5.6.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
      Watchman: 4.7.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
      Android SDK:
        Build Tools: 23.0.1, 25.0.2, 25.0.3, 26.0.2, 27.0.3
        API Levels: 23, 25, 26, 27
    IDEs:
      Android Studio: 3.1 AI-173.4720617
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      @storybook/react-native: 3.4.10 => 3.4.10
      @types/react: 16.3.5 => 16.3.5
      @types/react-native: 0.56.8 => 0.56.8
      react: 16.4.1 => 16.4.1
      react-native: 0.56.0 => 0.56.0
    npmGlobalPackages:
      react-native-git-upgrade: 0.2.7

Description

Scenario

To integrate a custom font to my react-native project, I followed the common known steps:

• add font files to assets/font directory (in my case OTF files)
• specify rnpm with its assets array in the package.json
• run react-native link to set things ready

Expected Behavior

react-native uses correct font and weight when given specific fontFamily.

Actual Behavior

The runtime uses the bold font weight, no matter what. I tried various combinations of fontFamily, fontWeight and fontStyle, the result is always the same:

Analysis so far

• The OTF files are included correctly in the generated intermediate .app file
• Behavior is the same for an actual device and the simulator
• As soon as I include only one of the OTF files in the app bundle, that particular weight is available for rendering though.
• react-native uses CALayers to render text, whereas the interface builder version of the app uses “real” UILabels (see https://github.com/facebook/react-native/issues/20788#issuecomment-415300199 for screenshots)
• Renaming the font files as suggested by https://twitter.com/dan_tamas/status/1032548654861705216 does not change behavior (plays probably with Android… but this is another story 😉 )
• Listing the available fonts using [UIFont familyNames]/[UIFont fontNamesForFamilyName] shows that the font is available to the app:

2018-08-23 11:22:18.158162+0200 fontproblem[83530:36797568] FreightSans Pro: (
    "FreightSansProBold-Regular",
    "FreightSansProBlack-Regular",
    "FreightSansProMedium-Regular",
    "FreightSansProSemibold-Regular",
    "FreightSansProLight-Regular",
    "FreightSansProBook-Regular"
)

• To ensure that there is no bug due to the files themselves, I created a small demo within a “vanilla” iOS app using interface builder and UILabel instances; the font gets rendered correctly:

Reproducible Demo

See https://github.com/swissmanu/react-native-fontproblem for demonstration.

[panupongvmaqe]

@swissmanu - Thanks you very much, I am able to see the font weight. Kudos to you for finding a way to solve this.

[swissmanu]

after debugging my way through RCTFont.mm, i finally was able to nail down to the problem:

our font uses -Regular and -Italic as suffix in the postscript name to differentiate font style variations. RCTFont.mm#L56 does a string based suffix check to detect a fonts weight.

RCTFont.mm#L40 defines regular as weight, not as style. this made the whole font lookup mess things up.

we were able to get rid of the suffix in our font files and finally everything works smooth.