Chrome not rendering @font-face ttf/woff smooth

css, font-face, icons, smoothing

Solution

maybe this css property solves your problem:

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

Problem

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?

Original source

Related problems