Why is my font-face adding space at the baseline?

Question

My font is doing something weird. There seems to be space being added below the font (Not the margin) that is pushing it up above the line-height. If I adjust the height it seems to be anchored to the bottom of the line height so instead of increasing the space below it actually pushes the top of the font above the line height. Is there any way, save adding margin or padding to the top, to make sure it's anchoring to the top of the line-height or middle?

CSS:

@font-face {font-family: 'AvenirLTStd-Book';src: url('/us/_media/font/2CA9EF_0_0.eot');src: url('/us/_media/font/2CA9EF_0_0.eot?#iefix') format('embedded-opentype'),url('/us/_media/font/2CA9EF_0_0.woff2') format('woff2'),url('/us/_media/font/2CA9EF_0_0.woff') format('woff'),url('/us/_media/font/2CA9EF_0_0.ttf') format('truetype');}
@font-face {font-family: 'AvenirLTStd-Black';src: url('/us/_media/font/2CA9EF_1_0.eot');src: url('/us/_media/font/2CA9EF_1_0.eot?#iefix') format('embedded-opentype'),url('/us/_media/font/2CA9EF_1_0.woff2') format('woff2'),url('/us/_media/font/2CA9EF_1_0.woff') format('woff'),url('/us/_media/font/2CA9EF_1_0.ttf') format('truetype');}

h1,h2,h3,h4,h5,h6 {
    font-family:'AvenirLTStd-Black', Arial, sans-serif;
    margin-top: 0;
    font-weight: normal;
    line-height: 1em;
    color: inherit;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    letter-spacing:1px;
}

Answer 1

I was on this for a while now and since I have no Myfonts.com account and the font is free font generated by FontsQuirrel or downloaded from GF I had to experiment. In PS my font looks correct by comparison,

Montserrat vs Open Sans

But webfont is completely off.

I was than forced to test several font editing software. First I tested FontForge and could simply not figure out the proper metrics, than i got trial FontCreator that has this great feature that auto calculates the metrics which when entered in FontForge fix the issue.

But paying $79.00 min to just fix this and never use the software again did not seem feasible and I also did not want to go back and forth between the two to get the metrics. I continued to play with FontForge and finally found the solution. You must reset all values to 0 in Element -> Font Info -> OS/2 -> Metrics and than uncheck the "Is Offset"

Instead another image here is short video that shows how to fix this

http://take.ms/rJpqh

Note that for some fonts it is better to uncheck the Really use Typo metrics which helped in my case.

Answer 2

I know this is old, but I thought I'd leave a comment for others Googling this issue.

It looks like you are using Avenir from MyFonts.com, which allows you to 'tweak' your webfont package.

I had the same issue as above, changing the Line Height Adjustments to use Bounding Box (Match the bounding box of the glyphs, line gap will always be 0) fixed the issue

I used the settings in the screenshot below: [link to screenshot is down]

The idea is to increase line-height to decrease the space at the baseline, i.e.:

h1  {
    font-size: 2rem;
    line-height: 3rem;
}