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
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
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:
http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/
It's possible there is not anything you are doing wrong. Here are some points that may apply, some controllable by you, some not.
vertical-align: baseline
..eof
,.woff
,.ttf
) themselves may not be defined the same, and thus different browsers are using different files and displaying differences.src
calls is messing things up, but you can try eliminating the second one: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:
Update
This post gives some tips about possibly resolving rendering issues. This is for Font Squirrel, and he specifically notes:
But he also confirms,
Which goes with my point #2.