Skip to content
Wholesale and retail

Data-empowered digital commerce

To stand out in the global competition, wholesale and retail companies need to tap into process and customer data and think about the value they can extract from analytics. 

We can help
Manufacturing industries

Customer-centric, data-led manufacturing

For manufacturers, true digital transformation starts by envisioning where in the value chain can data be applied to make a difference.

We can help
Public Sector

Accessible and intuitive public services

All public sector services should be designed to serve citizens first. Digital solutions and applications must be easy to use, despite physical and cognitive disabilities.

We can help
Energy and utilities

Dynamic and resilient energy economy

Digital processes and data-led services help energy and utility sector companies develop a stable energy offering with transparent, customer-centric services.

We can help
Digital platform economy

Fast-tracking innovative business models

Shared platforms offer fast entry to new markets, cost-efficiently and scalably. But lasting value add comes from cross-industry collaboration and linking products with complimentary services.

We can help
Banking, finance and insurance

Agile business, customer-centric services

Digitally disrupted, the companies in the banking, finance and insurance sector must actively innovate new approaches to build omnichannel customer experiences that fully utilize data.

We can help
Medical devices manufacturers

User-centric healthcare applications

While medical device software is strictly regulated, there's room for innovations that make life easier for patients and caregivers. Stable and secure data flow is a must.

We can help

Blog: Fix Custom Font Inconsistency in React Native

Ryan Padilla

May 8 2020

If your custom fonts are starting to drive you mad in your react-native projects, you're not alone! Here's how to fix them. 

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

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:

Screen Shot 2022-02-15 at 6.57.55 PM

To get the border, add this to your styles to match my example:

Screen Shot 2022-02-15 at 7.00.44 PM

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:
Screen Shot 2022-02-15 at 6.58.13 PM
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:
Screen Shot 2022-02-15 at 7.02.32 PM
After that, return to project root directory and run the following to update assets:
Screen Shot 2022-02-15 at 6.58.26 PM
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!


Did we catch your interest?

Drop us a message, we'll be happy to discuss with you!