CODEWITHSUNDEEP
androidiosfontsreact-native
henkimon
henkimon

Reputation: 1481

React Native: Custom font renders differently on Android and iOS

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?

enter image description here

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

Upvotes: 17

Views: 7604

Answers (2)

Arkadiusz Konior
Arkadiusz Konior

Reputation: 1159

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

Upvotes: 8

AlexB
AlexB

Reputation: 3548

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
  }

enter image description here

Upvotes: 8

Related Questions