Chrome not rendering @font-face ttf/woff smooth

Question

I am using the IconMoon @font-face icon font for a project I'm working on.

The font is nice and smoothly rendered when only including the .svg and/or .eot font, or when browsing with other browsers such as IE9. But when browsing the site with Chrome, and including the .ttf and/or .woff format, the icons become very choppy and no anti-aliasing at all. Is there a way to tell Chrome to load the .eot or .svg instead of .ttf or .woff?

Answer 1

I found this works for that issue. I don't think the font-smooth solution actually works.

@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
   src: url('fonts/montserrat-regular-webfont.eot'); /* IE9 Compat Modes */
   src: url('fonts/montserrat-regular-webfont.eot?iefix') format('eot'), 
       url('fonts/montserrat-regular-webfont.ttf')  format('truetype'), 
       url('fonts/montserrat-regular-webfont.svg#montserratregular') format('svg'),
       url('fonts/montserrat-regular-webfont.woff') format('woff'); 
}

Firefox will pick the last one in the list (woff), working or not, IE will use eot, and Chrome will pick the first one that works (svg). Woff works too in chrome, but causes aliased glyphs, so putting svg ahead of woff solves that.*

This solution works, but causes an extra request in Safari, you could leave your svg below woff like you did originally and add:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'OpenSansLightItalic';
    src: url('fonts/montserrat-regular-webfont.svg#montserratregular')  format('svg');
  }
}

Read about it here: http://hollisterdesign.wordpress.com/2014/04/29/note-to-self-always-use-this-fix/

Answer 2

maybe this css property solves your problem:

yourSelector {
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
}