React Native: Custom font renders differently on Android and iOS

Question

In the picture below I have inspected the same Text-component as rendered on Android on the left and iOS on the right. It seems that iOS renders the font in top of the Text-container.

I'm using the same TTF font-file for both Android and iOS. (I found an online reference to the font I'm using here.)

Any ideas how to make the font render the same for both Android and iOS?

Just to be clear, the difference is not caused by any styling (margin, font size, etc.). It's exactly the same.

Answer 1

I found a fix but it doesn't feel right. I think you should find another font that renders the same on each device.

You can play around with the lineHeight, padding and margin to get the same vertical alignment for your text components :

Ios:

instructions: {
    fontFamily: 'Metric-Regular',
    fontSize: 50,
    lineHeight: 50,
    paddingTop: 25,
    marginBottom: -35,
    marginTop: 35
  }

Answer 2

Problem is with lineGap and ascender .ttf font file parameters. Fix them using ftxdumperfuser tool. Check https://medium.com/@martin_adamko/consistent-font-line-height-rendering-42068cc2957d