Question

I am using the @font-face in css3 to place some fonts on the website without using images for page headings.

However I found that a gap is created below the heading when using the font-face a bit like a paragraph or a line break. The gap size is relative to the font size and increase when the size is increased.

The font type that I am using is Asenine which is relatively small so I have the size set to 60px

I am not sure why this is happening and can’t seem to find a fix.

Here is my CSS

}
@font-face {
    font-family:'asenine';
    src: url('fonts/asenine.eot');
    src: url('fonts/asenine.eot?#iefix') format('embedded-opentype'),
    url('fonts/asenine.woff') format('woff'),
    url('fonts/asenine.ttf') format('truetype');
 }
 h1{
    font-size:60px;
    font-family:asenine, Arial, Helvetica, sans-serif;
    text-shadow:7px 3px 4px #0c0c0c;
    font-weight:100;
}

Answer 1

This might be happening because of line-height. The larger the font size, the larger line height. And use CSS shorthand for font related settings, it’s better:

h1 { 
    font: normal 60px/0 'asenine', Arial, Helvetica, sans-serif; 
    text-shadow:7px 3px 4px #0c0c0c;
}

The first line means: normal weight, 60px font size, 0px line-height (to remove that space), font-families.