CODEWITHSUNDEEP
iosionic-frameworkfontsopentype
avilagab
avilagab

Reputation: 13

OpenType font not rendering properly on iOS

I'm working on a Ionic project, and for some reason the font we are using is not rendering properly in iOS (in Android it's working well). We used the @font-face rule in order to use the font. It works well if I switch to another font (I've tried with other truetype fonts).

@font-face {
font-family: 'font_title';
src:  url('../fonts/font_name.otf') format("opentype");
}

Here's an Example of what happens: The title should say "Notificación", but instead it shows "Notiffjcación". This other image shows how instead of "..." it shows "%.", and you could also see the different color at the accent mark.
¿Can anybody tell me if there's a workaround for this issue or should we just use another font? ¿is this problem caused by the font or by the OS?
Thanks in advance!

Upvotes: 1

Views: 1415

Answers (1)

Annie Gupta
Annie Gupta

Reputation: 2822

You can always convert the font online at: https://onlinefontconverter.com/ and check if it works. Once done with conversion lets say to true type font. You can use it like this.

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
}

Upvotes: 4

Related Questions