CSS custom font vertical offset (bug?)

Question

I use custom font in my CSS with this method:

@font-face {
    font-family: 'Gabriola';
    src: url('Gabriola.eot');
    src: url('Gabriola.eot?#iefix') format('embedded-opentype'),
         url('Gabriola.woff') format('woff'),
         url('Gabriola.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.gabriola {
  font-size: 20px;
  line-height: 20px;
  height: 20px;
  background: red;
}

<div class="gabriola">Some texty text here</div>

Each browser renders this fonts by it's own way with vertical offset top and bottom like this

What am I doing wrong? Thanks

Answer 1

I know it's been 5 years since the OP asked the question, but I found this great technique on getting text baseline-aligned correctly.

Basically, the text container must be an inline-block with line-height: 0; Then, you create an inline-block pseudo-element and set its height according to the line-height you wanted:

span {
  font-size: 2em;
  background: red;
}
span.baseline-align {
  vertical-align: baseline;
}

span.true-baseline-align {
  display: inline-block;
  line-height: 0;
}
span.true-baseline-align::after {
  content: '';
  display: inline-block;
  height: 1em; // this is where you control line-height
}

<span>Normal text</span>
<br><br>
<span class="baseline-align">With vertical-align: baseline</span>
<br><br>
<span class="true-baseline-align">with trick to really baseline-align</span>

http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/

Answer 2

It's possible there is not anything you are doing wrong. Here are some points that may apply, some controllable by you, some not.

1. Just to be sure, explicitly set vertical-align: baseline.
2. The different files (.eof, .woff, .ttf) themselves may not be defined the same, and thus different browsers are using different files and displaying differences.
3. Not sure if having two src calls is messing things up, but you can try eliminating the second one:

@font-face {
    font-family: 'Gabriola';
    src: url('Gabriola.eot'),
         url('Gabriola.eot?#iefix') format('embedded-opentype'),
         url('Gabriola.woff') format('woff'),
         url('Gabriola.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

These are all mere guesses. You will have to test #1, 3. If the issue is #2, I'm not sure there is an elegant solution.

There is, of course, the caveat on this site:

Keep in mind that font rendering can vary widely across browsers and operating systems. Many developers have experienced such poor results from Windows and Internet Explorer that they avoid using custom fonts altogether. Always be sure to examine your results closely on all the browsers that you can to decide if the quality is acceptable.

Update

This post gives some tips about possibly resolving rendering issues. This is for Font Squirrel, and he specifically notes:

If you downloaded the kit, you might try regenerating the font with the generator. We make periodic adjustments to the generator that might improve the hinting or rendering of the font.

But he also confirms,

Not to pass the buck, but the most common cause is a bad original font.

Which goes with my point #2.

Answer 3

I had the same problem and the solution was to reconstruct the font with the properties of the original without changing anything in a new file with Hight logic font creator, the font is unchanged and equal to the original problem is corrected and aligned to the perfection in all browsers including ie6, was the work of a few hours but this is the result in case you need some user.

http://www.filefactory.com/file/1miw29cddg21/n/crossbrowser_gabriola_font.zip

Answer 4

This is the solution if anyone has the issue and do not want or cannot reconstruct the font: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override

This prop will adjust the vertical ascend property when the font is imported.