android / chrome web font rendering issue - vertical/width cropping

Question

so im working on a new website. i have created a custom font (ttf) and generated webfonts from it using font squirrel. the font embedding works great, cross-browser on the desktop. it also works fine on ios devices. but on android devices the single character i use for the site's logo is being cropped vertically. less than half the glyph is being displayed. it almost seems like it's an exact square (the logo is long an horizontal) see screenshot below...

i have confirmed this behavior on a galaxy s3, nexus 5, and nexus 7 using either the stock android browser or google chrome. if you notice, there are 3 other icons below it (the circles) they are from the same webfont and render fine. the logo actually renders correctly at a smaller font sizes.

i'm using the following css:

/* font styles */
@font-face {
    font-family: 'lticons';
    src: url('fonts/lticons-webfont.eot?v=1.1.1');
    src: url('fonts/lticons-webfont.eot?#iefix&v=1.1.1') format('embedded-opentype'),
         url('fonts/lticons-webfont.woff?v=1.1.1') format('woff'),
         url('fonts/lticons-webfont.ttf?v=1.1.1') format('truetype'),
         url('fonts/lticons-webfont.svg?v=1.1.1#lticons') format('svg');
    font-weight: normal;
    font-style: normal;
}
.lt {
  display: inline-block;
  font-family: lticons;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.lt .logo:before { 
  content: "\f000"; 
}
/* html styles */
.hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.hero .logo {
    position:absolute;
    display:block;
    overflow:visible;
    text-overflow:string;
    font-size:20em;
    color:#fff;
    top:25%;
    left:50%;
    -webkit-transform:translate(-50%,-25%);
    -moz-transform:translate(-50%,-25%);
    -ms-transform:translate(-50%,-25%);
    -o-transform:translate(-50%,-25%);
    transform:translate(-50%,-25%);
    text-shadow:rgba(0,0,0,.5) 1px 1px 1px
}

and the following html renders it:

<section class="home col-xs-12">
  <div class="hero">
   <i class="lt logo"></i>
   <h1>Transaction intelligence &amp; customer<br/>insites for the mobile world</h1>
  </div>
</section>

i have tried w/ and w/o the transform code. that hack only deals with positioning. it renders the same. any suggestions? thanks.

Answer 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.

Answer 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 !