Strange line-height on mobile browsers

0
votes

I have the following problem. On mobile browsers the font (which is loaded with @font-face) seems to have a weird offset in its line-height. It appears to move towards the top a little bit.

I figured out it's the font. When I load Open Sans for example...no problem.

@font-face loaded font (Rubrik):
http://s12.postimg.org/gnre9viod/Rubrik.png

Open Sans:
http://s27.postimg.org/s4jgc6zyb/Open_Sans.png

Look at the small grey text saying 't/m 6 maart 2016'
It's shifted to the top.

I have tried:

  • Fix/Automatic verticle metrics with fontsquirrel
  • Redownloading the original font and generating webfonts with different generators

I have the following CSS:

body {
   height: 100%;
   width: 100%;
   font-family: $typenormal;
   font-weight: normal;
   font-size: 18px;

   @media(max-width: 991px) {
       font-size: 14px;
   }

   line-height: 1.5;
   color: #111;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
}

I am loading:

  • eot
  • eot / IEfix
  • woff
  • woff2
  • ttf
  • svg

Doesn't work. Any other idea's than to use Open Sans?

1
cssmobilefontswebfonts

1 Answers

2
votes

Try using SVG instead of the other types of the font. (Edit @font-face)

Since Rubrik font doesn't have one, you may want to convert .otf to .svg at the link below.

https://onlinefontconverter.com/