Bottom of Custom Font Cut Off in Opera and Webkit

Bottom few pixels of text cut off

The quickest fix looks to be this:

Change the font-size here from 14px to 13px

#slidertext h3 {
font-size: 13px;
// other styles
}

Works for me in Chrome.

Why are my descenders being cut off when using CSS @font-face?

With some help from @adamliptrot, I discovered that Droid Sans' descenders are absolutely fine at a few precise pixel sizes: 18, 22 and 27px. I adjusted my em's accordingly:

h1 { font-size: 1.6875em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.125em; }

Not ideal, but it works:

_{(source: thinkdrastic.net)}

Chrome cuts off parts of type on the left, firefox and IE display fine. Chrome bug?

It appears that the text starts to be cut off when at least one CSS property that promotes the element to RenderLayer is applied (e.g. transform or opacity). So it seems to be the internal problem of the renderer that can't be fixed easily at CSS level. I'd recommend just to add some left padding (and right padding, if necessary) to make all letters fit inside the element boundaries, and compensate these paddings by transform or negative margins.

Issue in Webkit browsers with text-shadow in custom fonts

This is a problem because webkit makes the text node box too small to accomedate the font. Probably due to its cursive style etc.

Add a   to the end of the text and you will see it works. To offset the extra space that creates you could use a negative right margin. If the only problem is the headers this should work fine...

margin-right: -4px;

Fiddle arround with the value until you get it right

Google font is clipped in Chrome

I solved the problem following these steps:

1) downloaded the file from Google

2) went on fontsquirrel and converted the .ttf file.

3) hosted it locally and used the following code:

@font-face { 
    font-family: 'bubbler_oneregular';
    src: url('../font/bubblerone-regular-webfont.eot');
    src: url('../font/bubblerone-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('../font/bubblerone-regular-webfont.woff') format('woff'),
    url('../font/bubblerone-regular-webfont.ttf') format('truetype'),
    url('../font/bubblerone-regular-webfont.svg#bubbler_oneregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

And finally used it with:

font-family: 'bubbler_oneregular';

Hope this might help some of you, this should work with other Google fonts as well.

Pixels clipped with multiple text-shadows and negative letter-spacing in Webkit

I found a solution, sort of.

Here is another demo.

If you drop a   in after the cropped letter, it fixes it. But that's not ideal.

I tried using a similar technique with an :after pseudo element, but it doesn't work.

Fortunately enough for me, the text I'm trying to apply this style to is a pseudo element, so it was easy to throw a \00A0 in the content:''.

Flexbox text cutting off/not wrapping

Note I'm using autoprefixer so all -ms- prefixes are generated automatically. I will just note the prefix-less declarations here.

Adding the following line onto the paragraph did the trick flex: 0 1 auto;

I also had an issue where the text wouldn't wrap in the .feature-quote__cite container. I tried adding the above which didn't work. To fix this I had to add flex: 0 1 auto; directly onto the paragraph within rather than on the parent container .feature-quote__cite. Not ideal but it looks like it's done the trick.

As an aside, in IE11 the avatar image would get squashed when there wasn't enough horizontal space. I found adding flex-shrink: 0; to the image fixed this.

---

Related Topics