@font-face for custom fonts, fonts not smooth in Chrome

Question

I have a web application that is using CSS3\'s @font-face to embed custom fonts. So far this has works perfectly in IE and Firefox.

With Chrome, however, the custom fo

Answer 1

Try to add -webkit-transform: translateZ(1px); or another 3d transform.

explanation:

Chrome has another bug - blurry text when 3d transforms applied, so adding suggested property will blur chopped text and partially solve the issue. It is still a little bit blurry, but in many cases it is better then chopped one.

example1(issue): chopped text. I've added rotation here to be sure text gets chopped.
example2(solved): semi-smooth text. Applying 3d transform makes text blurry, so chopped text seems more smooth.

The small problem is that looks like we can't target only Windows versions of Chrome in CSS, so we have to use javascript to apply appropriate class.