6

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?

Erik Djupvik
  • 1,187
  • 1
  • 10
  • 13

4 Answers4

2

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/

Timothy Gu
  • 3,727
  • 28
  • 35
user323774
  • 400
  • 3
  • 9
  • SVG fonts either don't work or are deprecated in Chrome (depending on OS). http://blog.chromium.org/2014/08/chrome-38-beta-new-primitives-for-next.html – Curtis Blackwell Oct 27 '14 at 07:28
1

maybe this css property solves your problem: 

yourSelector {
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
}
neepo
  • 34
  • 1
  • by the way, the only browser that supports "eot" format is IE. chrome supports "svg" format too and you can include the link to "svg" file in your @font-face style rule, but if "ttf" or "otf" link is also provided, most browsers will prefer to use them. – neepo May 18 '12 at 11:09
0

Put the svg font's url before all others, Chrome will load the SVG and you will get a nice rendering, especially for light font.

Lory Huz
  • 1,557
  • 2
  • 15
  • 23
  • SVG fonts either don't work or are deprecated in Chrome (depending on OS). http://blog.chromium.org/2014/08/chrome-38-beta-new-primitives-for-next.html – Curtis Blackwell Oct 27 '14 at 07:27
-1

Try this little rotation for your font, hope it'll help you.

Example:

p{
  transform: rotate(-0.0000000001deg);
}
Viduthalai
  • 158
  • 1
  • 2
  • 9