iOS: Font weight of "condensed" font is not obeyed

When using a condensed font for an application, in our case “Acumin Pro Condensed” the font weight and styling is not obeyed when using with React Native.

React Native version:

info React Native Environment Info: System: OS: macOS 10.15.1 CPU: (8) x64 Intel® Core™ i7-4980HQ CPU @ 2.80GHz Memory: 579.14 MB / 16.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 11.10.0 - /usr/local/bin/node Yarn: 1.13.0 - /usr/local/bin/yarn npm: 6.7.0 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1 IDEs: Xcode: 11.2.1/11B53 - /usr/bin/xcodebuild npmPackages: react: 16.8.3 => 16.8.3 react-native: 0.59.10 => 0.59.10 npmGlobalPackages: react-native-cli: 2.0.1

Steps To Reproduce

1. Install custom font “Acumin Pro Condensed” to React Native project.
2. Try using italic variant of font, using textStyle: "italic". (Or a different weight)
3. Observe regular variant of font is used instead.

Describe what you expected to happen:

The font should be correctly rendered as italic or a different weight.

Snack, code example, screenshot, or link to a repository:

<Text style={{
    fontStyle: 'italic',
    fontFamily: 'Acumin Pro Condensed'
}}>Hello World</Text>

[simonmitchell]

Line height issues are generally just a PITA on iOS. You have to go into the font file itself and play around with the line height extender properties unfortunately @bitttttten. I can’t seem to attach font files here, but you can find a tutorial on doing this here: https://www.tothenew.com/blog/fix-vertical-position-issue-of-custom-ios-fonts/

[bitttttten]

Thanks @simonmitchell ! And yeah tell me about it. On Android it looks perfect, shame it’s such an odd experience on iOS. I tried my best to edit these values as close as the article’s instructions as possible, although his formula didn’t quite work for me so I just had to do it by eye. It took almost the last hour :, )

Did you manage to fix it for Acumin Pro Condensed? If so would you mind comparing / sharing the hhea config? Don’t worry if not. I have only done Acumin Pro Condensed Bold and my values are:

<hheaTable
	versionMajor="1"
	versionMinor="0"
	ascender="760"
	descender="0"
	lineGap="0"
	advanceWidthMax="1032"
	minLeftSideBearing="-177"
	minRightSideBearing="-191"
	xMaxExtent="1000"
	caretSlopeRise="1"
	caretSlopeRun="0"
	caretOffset="0"
	metricDataFormat="0"
	numberOfHMetrics="792"
/>