In CSS the Bottom Part of my Custom Fonts are Getting Cut Off (the g's and y's)

Question

I can't figure out why letters that drop below the line (like g and y) in my paragraph are getting cut off. I tried setting the line height higher but it still cut them off. I played with font-size in px, pt, and em but still no luck. Now when I set the font-size much larger (like 3.0em) the problem disappears. But I need the font to be about this size.

Here is the link: http://sportegy.com/font-test/font-test.html

You'll need to use the link and see the .ttf font I have in order to really see the problem. However, I'll paste my HTML here too.

<html>
<head>
<style>
@font-face {
font-family: lib-font;
src: url('css/LiberationSansNarrow-Regular.ttf');
}
@font-face {
font-family: lib-bold;
src: url('css/LiberationSansNarrow-Bold.ttf');
}   
</style>
</head>
<body>

<span style='font-family: lib-font;color: #232322;font-size: 1.0em;'>   
The quick brown foxy was jumping over the green doggy.<br/>
The quick brown foxy was jumping over the green doggy.<br/>
The quick brown foxy was jumping over the green doggy.<br/>
The quick brown foxy was jumping over the green doggy.<br/>
The quick brown foxy was jumping over the green doggy. 
</span>

I don't think it is a font issue. Like I said, if i increase the font-size to 3.0em then the problem goes away. — Thread7, Feb 11 '13 at 02:42
I tried it in Chrome 24 and Firefox 18. Both show the problem for me. But in my Android JellyBean brown I don't have the problem. — Thread7, Feb 11 '13 at 02:47

score 25 · Answer 1 · edited May 23 '17 at 12:03

25

Try

line-height: normal;

Seemed to fix a few people's problems.

edited May 23 '17 at 12:03

Community

1
1

answered Feb 11 '13 at 03:34

Daniel Imms

47,944
19
150
166

3

Thanks a lot! I have the same issues as author have. Your answer helps me :-) – Oleksii Nov 03 '15 at 11:24

Jeff Miller · Answer 2 · 2013-02-11T03:08:43.687

4

Try increasing the line-height to something like line-height: 1.2;

If you bump the font size up to 1.1em, it doesn't get cut off.

I suggest using a CSS reset like Normalize.

edited Feb 11 '13 at 03:08

answered Feb 11 '13 at 01:40

Jeff Miller

2,405
1
26
41

score 1 · Accepted Answer · edited May 23 '17 at 10:27

1

I can only reproduce it at exactly 16px (1em on my browser), so I suspect a font issue like the one described here and here.

You could use the font as-is and avoid 16px, fix the font metrics yourself (as described in the links), email the font creator, or choose a different font. Lots of good free fonts out there, all the best :)

edited May 23 '17 at 10:27

Community

1
1

answered Feb 11 '13 at 03:59

nzt

368
2
9

score 0 · Answer 4 · answered Jul 25 '14 at 13:12

0

Honestly, the only way I've found to fix this error seems to be changing the font size. There seems to be a few errors with certain custom fonts, mainly in Chrome.

I had the same issue and changed the font size from 30px to 32px and it's fine now :)

answered Jul 25 '14 at 13:12

MyNameWouldGoHere

145
1
2
13

score 0 · Answer 5 · answered Nov 12 '14 at 18:35

This is because the descender value of the font file is too short. Descenders are letters like p,g,q or y. These letters reach under the baseline so the font file should include a value greater than the lowest descender. The browser consider the ascenders and descender values to be the font "container" so it will cut any element going beyond those values. Because of this, CSS cannot fix this problem as the issue resides in the font file itself.

In order to fix it, the only way is to edit the font file and change those values. Try to reach out to the original designer.

Unfortunately, this is bound to happen with free fonts...

score 0 · Answer 6 · answered Dec 12 '19 at 08:11

0

In my case:

letter-spacing: normal;

answered Dec 12 '19 at 08:11

MIA

373
3
18

In CSS the Bottom Part of my Custom Fonts are Getting Cut Off (the g's and y's)

6 Answers6