Orange County
300 Spectrum Center Drive, Suite 1110
Irvine CA 92618
california@vincit.com
Los Angeles
520 Broadway, Suite 200
Santa Monica CA 90401
california@vincit.com
Palo Alto
470 Ramona St
Palo Alto CA 94301
california@vincit.com
Arizona
2 N. Central Ave Suite 1800
Phoenix, AZ 85004
(480) 438-7450
arizona@vincit.com
Helsinki
Arkadiankatu 6, 00100 Helsinki
John Stenbergin ranta 2, 00530 Helsinki
Tampere
Visiokatu 1, 33720 Tampere
Turku
Helsinginkatu 15, 20500 Turku
Switzerland
Hôtel des Postes Place Numa-Droz 2 Case postale 2511
+41 32 727 70 70
Technology
Fix Custom Font Inconsistency in React Native
Ryan Padilla
May 8th 2020
If your custom fonts are starting to drive you mad in your react-native projects, you're not alone! The font inconsistency issues between platforms have been in part due to iOS ignoring a font property that android doesn't. Additionally, there are some react-native text style properties enabled by default that could affect the android rendering. There are probably other reasons, but after tinkering with the font files and mentioned style properties you can fix these issues. Lets jump into it!
What you will need
- Xcode
- Apple Font Tool Suite
- React native project with custom fonts
Be sure to download the correct version of the font tool suite that corresponds to your xcode version.
Visualize the problem
To fix the issues, you'll first need to visualize them. Creating a view with text components surrounded by borders is a good way to do so (credit to this blog post).
I'm using Gotham-Bold as my custom font, with the following components rendering the text:
<View style={{ alignItems: 'center' }}>
<Text style={styles.defaultText}>System default font</Text>
<Text style={styles.defaultText}>
Multiline system {'\n'}default font
</Text>
<Text style={styles.text}>Custom font </Text>
<Text style={styles.text}>Multiline {'\n'}custom font</Text>
<Text style={styles.customText}>Custom font with lineHeight</Text>
<Text style={styles.customText}>
Multiline custum font{'\n'}with lineHeight
</Text>
</View>
To get the border, add this to your styles to match my example:
{
borderStyle: "solid",
borderWidth: 1,
fontSize: 20,
...restOfFontStyles
}
I've found it's good to have an example with lineHeight set as well, since that also gets affected differently, in my example i have lineHeight: 30 in styles.customText.
On closer inspection, we can see that the font is not centered within its box properly. Time to tackle that!
Generating .hhea.xml files from a font
We will be editing .hhea.xml files to change the font styles, in my case I'll be editing the Gotham-Bold font. To generate the xml for a font, run the following from the react-native project root:
cd assets/fonts
ftxdumperfuser -t hhea -A d Gotham-Bold.otf
You will need to do this for all fonts you'll be editing.
Changing .hhea.xml properties
Updating the xml files to fix font behavior usually involves changing the ascender, descender, and lineGap properties. As of now, iOS doesn’t respect lineGap, so I’ve been setting it to "0". After that, usually tinkering around with the other two should be enough, though I favor changing ascender first. I’ve heard mention of changing numberOfHMetrics, but apparently there is a min value for that based on another font property.
As a starting rule of thumb, I'd use Martin Adamko's suggestion of setting lineGap to "0" and then adding the replaced value of lineGap to ascender.
Applying updates
While still in the fonts directory, run the following to apply changes from Gotham-Bold.hhea.xml to Gotham-Bold.otf:
ftxdumperfuser -t hhea -A f Gotham-Bold.otf
After that, return to project root directory and run the following to update assets:
react-native link
If you’re running a sim or emulator, you will need to run your
react-native run-ios/run-android commands to see the changes every time you update.Additional tweaks
If your fonts are still slightly off, try setting includeFontPadding to false and textAlignVertical to ‘center’ in your font styles. The includeFontPadding text style prop is enabled by default in react-native, but for some fonts, it can make them misaligned when centered vertically on android. The docs describe this behavior in more detail.
After trying these methods, you should end up with consistent custom fonts!
