CSS custom font vertical offset (bug?)

cross-browser, css, font-face

Solution

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

- Just to be sure, explicitly set `vertical-align: baseline`.

- The different files (`.eof`, `.woff`, `.ttf`) themselves may not be defined the same, and thus different browsers are using different files and displaying differences.

- 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.

Problem

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

Original source