Android / Chrome Web Font Rendering Issue - Vertical/width Cropping
Solution 1:
I had this exact same issue, but only seemed to occur when I had huge icon fonts. If you add a background colour to the icon font do you then see that background colour span the full width of where your icon should be? What I did was to change the order of the font type so that the svg version was first in the list, above the eot version.
Solution 2:
I got exactly the same problem with an icomoon font. Rendering in chrome cropped some icons. I really spent a lot of time on this, tried everything I found on the web (including changing the order of svg and woff in the font-face CSS definition), but without any result.
I noticed a strange behaviour : my icon font was cropped only until a font-size of 256px... after that, the rendering was ok.
I finally got the solution from the icomoon support (within 5 minutes ! they rock !). Here their answer :
"It’s a Chrome font rendering bug. Try changing the Em Square Height of the font before downloading it. You can find this option in the font tab > Preferences > Font Metrics. Change it to 1024."
If you use other font apps, check if you can modify this 'Em Square Height' parameter for you font before downloading it.
This solved the problem for me !
Post a Comment for "Android / Chrome Web Font Rendering Issue - Vertical/width Cropping"