Custom Font discrepancy iOS vs Android

Ionic Framework
1

My app had issues with the custom font I’m using. On Android it looks superb. On iOS the font spacing is way too wide and the font seems thinner.

I already tried the few possible solutions I’ve found here and on stackoverflow but none seems to work.

I’m using Montserrat as a font(Montserrat - Google Fonts) and this is my variables css(the part that matters):

@font-face {
font-family: “Montserrat”;
font-style: normal;
font-weight: normal;
src: url(“…/assets/fonts/montserrat/Montserrat-Regular.ttf”);
}

/** Ionic CSS Variables **/
:root {
–ion-font-family: “Montserrat”;

How to get iOS looking just as it should?

Take a look at this picture to see the difference:

ionic font issue
ionic font issue1920×1440 185 KB

2

The only thing that displays correctly is the ion-list-header, while nothing else does.

3

managed to fix this problem?

4

Rafael, yes I did. Sorry for the late reply.

The issue was that I was using .ttf (TrueType) font, when I switched to .otf (OpenType), for the same font, iOS/Safari started to recognize and display the font!
I could never find a reason for this anywhere before or after I figured out.