4

I'm using an icon font which renders perfectly on firefox and safari, but very poorly on chrome. I've played with the -webkit-font-smoothing properties but no to effect.

Chrome (v56 osx): Chrome

Safari: Safari

Firefox Firefox

Css

@font-face {
    font-family: 'Glyphter';
    src: url('../fonts/Glyphter.svg#Glyphter') format('svg');

    src: url('../fonts/Glyphter.eot');
    src: url('../fonts/Glyphter.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Glyphter.woff') format('woff'),
         url('../fonts/Glyphter.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

[class*='icon-']:before{
    display: inline-block;
   font-family: 'Glyphter';
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
    font-size: 120px;
}
benc
  • 1,978
  • 3
  • 15
  • 22

0 Answers0