0

I am using Source Sans Pro from Google Fonts in my project, but sometimes Chrome will completely break the rendering of the font.

an example of the bad rendering

I currently didn't understand when and why this occurs but sometimes I get this on page load, other times I've seen it happen when scrolling the page. Reloading the page fixes the problem. The problem doesn't occur in Firefox.

Here's how it should be rendered correctly:

the page rendered correctly

I've tried several fixes, including text-shadow, -webkit-font-smoothing: antialiased and the solution in this answer.

Can anybody help me?

Thanks.

EDIT: The theme is based on Bootstrap 2.3.2, the issues started when I imported Google Fonts. I created a JSFiddle as suggested at http://jsfiddle.net/NqQ5P/2/. Also note that I don't encounter the problem on my MacBook but only on Windows (and as I know also my customers as well).

Community
  • 1
  • 1
Giovanni
  • 108
  • 1
  • 5
  • No code? How about a JSfiddle demo. A `sometimes` issue is kind of hard to diagnose. Under what circumstances do you have this issue? – Paulie_D Jun 17 '14 at 15:11
  • I added a JSFiddle demo. I currently don't know what are the circumstances under which I have this issue and I don't know how to replicate it. That's the problem. – Giovanni Jun 17 '14 at 15:50

1 Answers1

0

After trying countless solutions, the problem seems to have been disappeared (we haven't been able to reproduce it anymore) after I commented out text-rendering: optimizelegibility; in this section of the file bootstrap.css:

h1, h2, h3, h4, h5, h6 {
margin: 10px 0;
font-family: inherit;
font-weight: bold;
line-height: 20px;
color: inherit;
/*text-rendering: optimizelegibility;*/
}
Giovanni
  • 108
  • 1
  • 5