Webfont (@font-face) line-height issue

font-face webfonts css
Thibaut picture Thibaut · Oct 17, 2012 · Viewed 8.8k times · Source

I often embed webfont (@font-face) in sites that I develop and I have never encountered a major problem until today.

In fact, I feel there is a big issue with the line-height, I'm not extremely good at English so I'll try to illustrate it with pictures. I already contact the support from fontshop.com (where the font was bought) but they do not seem to understand / solve the problem.

What we had before with standard desktop font (= rendering is good for us):

What we had with the font-face (no change in CSS stylesheet):

Here is the CSS:

#content h1 {
    background:#000000;
    color:#FFFFFF;
    font-family:"DINPro-Bold","Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
    font-size:35px;
    line-height:30px;
    padding:10px;
    text-transform:uppercase;
}

Answer

Adam Privette picture Adam Privette · May 31, 2013

Usually font websites will have ways to configure the webfont package when you download it. I buy all my fonts from myfonts.com and under the advanced settings there are options for line-height adjustments. Try downloading the font using native line-height adjustments if this option is available. If not, try uploading the font to fontsquirrel's online font generator and upload the new version.

Related questions

Use multiple @font-face rules in CSS

How can I use more than @font-face rule in my CSS? I've inserted this into my stylesheet: body { background: #fff url(../images/body-bg-corporate.gif) repeat-x; padding-bottom: 10px; font-family: 'GestaRegular', Arial, Helvetica, sans-serif; } @font-face { font-family: 'GestaReFogular'; src: url('gestareg-webfont.eot'); src: …

Read More
Why should we include ttf, eot, woff, svg,... in a font-face

In CSS3 font-face, there are multiple font types included like ttf, eot, woff, svg and cff. Why should we use all of these types? If they are special to different browsers, why is the number of them greater than the …

Read More
Compressing fonts for using in web

Can fonts be compressed someway before using as webfonts? I have a font file which is 150kB. Is it possible to compress it down. And also if i call for both font .eot and .ttf will both be downloaded by …

Read More