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.

Chrome rendering

IE 11 rendering

Update:

adding -webkit-font-smoothing: antialiased; the problem remains... enter image description here

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');
}

Check out this answer http://stackoverflow.com/questions/15422770/font-face-svg-not-working-properly-in-chrome/19247378#19247378 — Supercranky, Feb 04 '14 at 08:14

Michał Dudak · Accepted Answer · 2014-07-14T08:50:39.930

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)

score 7 · Answer 2 · answered Jan 11 '14 at 12:54

7

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.

answered Jan 11 '14 at 12:54

Pika3323

83
4

score 1 · Answer 3 · answered Jan 09 '14 at 17:22

1

Have you tried adding this CSS to the Chrome one?

-webkit-font-smoothing: antialiased

Give that a shot and see if it helps.

answered Jan 09 '14 at 17:22

Fernker

2,238
20
31

score 1 · Answer 4 · answered Apr 22 '14 at 11:10

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; }
}

score 0 · Answer 5 · answered Aug 27 '14 at 21:35

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');
}

Bad font rendering Chrome

5 Answers5

Linked