0

I am using a font family from MyFonts.com and I include it like they have in their example css:

@import url("//hello.myfonts.net/count/xxxxxx");
@font-face {
    font-family: 'URWGroteskNarrow';
    src: url('fonts/XXXXXX_1_0.eot');
    src: url('fonts/XXXXXX_1_0.eot?#iefix') format('embedded-opentype'),
         url('fonts/XXXXXX_1_0.woff') format('woff'),
         url('fonts/XXXXXX_1_0.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

The font displays fine in all browsers but I have a problem with the baseline in Chrome. The font is displayed a bit higher than in other browsers: (left: Firefox, right: Chrome)

Left: Firefox, Right: Chrome

It seems that Chrome uses a different baseline which causes not only the font not being vertically centered when line-height and height are the same (see in the dark navigation bar) and even cut off on top.

Any ideas why this can happen?

Dehalion
  • 757
  • 1
  • 7
  • 16
  • 1
    possible duplicate of http://stackoverflow.com/questions/10766047/css-custom-font-vertical-offset-bug, http://stackoverflow.com/questions/8576807/bottom-of-custom-font-cut-off-in-opera-and-webkit, and http://stackoverflow.com/questions/10044130/custom-fonts-with-differrent-vertical-metrics-between-oss... please do research first. – jeremy Jun 22 '13 at 16:24
  • i did some research, but apparently using the wrong terminology. the first question looks promising, I already contacted the font vendor for a statement. I'll post an update once the problem is solved (or rewrite my question if it won't be solved). Thanks. – Dehalion Jun 22 '13 at 20:06
  • you can also try adding `line-height: 120%;` or any value you like inside the body tag selector to set a default line-height all browsers will follow. – bonbon.langes Jun 23 '13 at 10:21

0 Answers0