Geek asks and answers

Chrome not rendering @ font-face ttf / woff smooth

I use the IconMoon @ font-face icon icon for the project I'm working on.

The font is nice and smoothly displayed when only the .svg and / or .eot font is included or when viewed with other browsers such as IE9. But when viewing a site using Chrome, including the .ttf and / or .woff format, the icons become very mutable and do not smooth at all. Is there a way to tell Chrome to download .eot or .svg instead of .ttf or .woff?

+5
source share
4 answers

Perhaps this css property solves your problem:

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

I found this to work for this problem. I do not think that a solution with smooth smoothness 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 (woff), , IE eot Chrome , (svg). Woff , aliased glyphs, svg woff . *

, Safari, svg woff, , :

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

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

+1

Put the svg font url in front of everyone else, Chrome will load the SVG and you will get good rendering, especially for a light font.

0
source

Try a little twist for your font, hope this helps you.

Example:

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

More articles:


All Articles