Bad font rendering Chrome

Question

How i fix this?

First "D" is rendered on Chrome 31.0.1650.63 m and second is rendered on IE11.

Update:

adding -webkit-font-smoothing: antialiased; the problem remains...

It could be a problem with the video card?

Update 2:

css font code:

 @font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(../font/font1.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(../font/font2.woff) format('woff');
}

Answer 1

This is an issue with Chrome rendering engine but it looks like this is finally going to be fixed. See https://plus.google.com/u/0/+FrancoisBeaufort/posts/PGPpiQr6bwi

The issue is on Chromium's bugtracker: https://code.google.com/p/chromium/issues/detail?id=333029 https://code.google.com/p/chromium/issues/detail?id=25541

EDIT:
The DirectWrite support which enables pretty font rendering has been added to Chrome 37. (source: https://code.google.com/p/chromium/issues/detail?id=25541#c152)

Answer 2

This is an issue with Chrome itself. The problem only exists on Chrome for Windows. Macs and Linux users of Chrome don't have this problem. There's nothing you can really do about it.

Answer 3

Have you tried adding this CSS to the Chrome one?

-webkit-font-smoothing: antialiased

Give that a shot and see if it helps.

Answer 4

I had the same problem and the following code is the best work around that I found. Somehow if you hide and re-show the content of the body the font will load properly Hope this helps

body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    font-family: folio_medium;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

Answer 5

I found that giving svg font files higher priority solves the issue.

@font-face {
  font-family: 'HelveticaNeueLTStd-Bd';
  src: url('../assets/fonts/helvetica/2B7A70_0_0.svg#wf') format('svg'), // first means higher priority
  url('../assets/fonts/helvetica/2B7A70_0_0.eot');
}