CODEWITHSUNDEEP
cssiconsfont-facesmoothing
Erik Djupvik
Erik Djupvik

Reputation: 1197

Chrome not rendering @font-face ttf/woff smooth

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?

Upvotes: 6

Views: 9552

Answers (4)

user323774
user323774

Reputation: 430

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/

Upvotes: 2

Lory Huz
Lory Huz

Reputation: 1508

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.

Upvotes: 0

Viduthalai
Viduthalai

Reputation: 158

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

Example:

p{
  transform: rotate(-0.0000000001deg);
}

Upvotes: -1

neepo
neepo

Reputation: 34

maybe this css property solves your problem: 

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

Upvotes: 1

Related Questions