Search code examples
androidgoogle-chromewebfonts

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

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

enter image description here

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.

Solution

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