CODEWITHSUNDEEP
cssgoogle-chromewebfontsfont-awesome
edotassi
edotassi

Reputation: 476

Bad font rendering Chrome

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

Upvotes: 15

Views: 22143

Answers (5)

posit labs
posit labs

Reputation: 9431

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

Upvotes: 0

Michał Dudak
Michał Dudak

Reputation: 5048

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)

Upvotes: 14

Jonathan Thurft
Jonathan Thurft

Reputation: 4173

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

Upvotes: 1

Pika3323
Pika3323

Reputation: 83

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.

Upvotes: 7

Fernker
Fernker

Reputation: 2288

Have you tried adding this CSS to the Chrome one?

-webkit-font-smoothing: antialiased

Give that a shot and see if it helps.

Upvotes: 1

Related Questions