Menu
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;
}
402
While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size. Top: When the line height is too tight, it undermines the horizontal reading flow and increases doubling.
Sets line height to be equal to a multiple of the font size. If your font size is 10px, your line height will be 10px, 18px, and 20px, respectively. Sets line height as a percentage of the font size of the element. If your font size is 10px, your line height will be 3px, 5px, and 11px respectively.
If the value of the line-height property is smaller than the value of the font-size , text may overflow the element, and text on one line may overlap text on another line above or below it. It is often convenient to set the value of the line-height in the font shorthand property.
Line height is the vertical distance between two lines of type, measured from the baseline of one line of type to the baseline of the next. Traditionally, in metal type, this was the combined measurement of the font size and the strips of lead that were inserted between each row (called “leading”) of type.
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.
123
That's not the same font. The shape of the O and the curvature of the arm on the R give it away, which means the fallback fonts are being used, likely due to @font-face not loading properly. Different fonts will have different default spacing, as stated already, which would also lead you to believe it's a line-height issue.
Try making your fallback fonts something totally obvious, like:
font-family:"DINPro-Bold",serif;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
