avilagab avilagab - 14 days ago 5x
iOS Question

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!

Changing the font to truetype as @sharpkits suggested fixed the errors.


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;