CODEWITHSUNDEEP
cssfontstruetype
2famous.TV
2famous.TV

Reputation: 470

Big Scale Font ~ Line-Height difference between PC vs. Mac?

I'm using an Impact ( http://2famous.TV/fonts/263BAA_0_0.ttf ) on my site, but there is more spacing between the lines on PC than it is on Mac. Below you see an example of how the font gets pushed down on PC browsers. Any solution to the problem?

MAC: This is how the font appears on MAC PC: This is how the font appears on PC Edit:

At first I didn't want to use the standard Impact font that people have on their computers as it rendered quite differently on most computers. However, I figured a little hack that solvs the problem for me.

Make the wrapper height AND line-height at 80% of your font-size, and you'll have something that works for both PC and MAC. It will look like this:

<span style="font-family: impact; font-size:300px; height: 240px; line-height:240px">IRONY</span>

Upvotes: 1

Views: 4152

Answers (1)

Justin
Justin

Reputation: 27331

I was facing the same problem (but with a different font) and was able to fix it.

It is likely that whoever created your font did not set the Ascent value properly.

If you have the TTF, upload it to FontSquirrel, select the "Expert" option and then keeping all default options. The one that fixes it I believe is "Fix Vertical Metrics." but I had issues when changing the defaults so I recommend keeping them as-is.

Now the font line height renders the same on MAC and PC (it worked for me).

Upvotes: 2

Related Questions