CODEWITHSUNDEEP
cssgoogle-chromefontscross-browser
ToxicLogix
ToxicLogix

Reputation: 85

Font Rendering Issue in Chrome

I am seeing an issue with a site I am developing where the content regions of the page are showing random artifacts with font rendering. The pages are using Google Font 'Source Sans Pro' and there are no additional tags other that p-tags in the screenshot below. It looks like it is using the fallback sans-serif on parts of the page and the appropriate font in others.

enter image description here

I've also noticed if I toggle the font-family CSS attribute in the console on and off it remedies the appearance... Additionally if I refresh the page (instead of using the on-site navigation) it also seems to render properly. I've not been able to replicate this on another machine with the latest version of Chrome, but it is consistent across my development and test environments. The only extensions I am using are Disconnect, AdBlock, PageSpeed Insights, an RSS reader, and Javascript Quickswithcer... All other browsers appear to behave as expected.

CSS used:

body,*{font-family: 'Source Sans Pro',sans-serif}

Any ideas as to why the latest version of Chrome for Windows may be getting presented this way?

Upvotes: 0

Views: 1868

Answers (1)

Isaiah
Isaiah

Reputation: 26

I believe I came across a similar issue. I was able to fix it by overriding the CSS text-rendering: optimizeLegibility set on the body tag by a CSS framework I was using like so:

body { text-rendering: auto; }

Note: In the interest of trying to track the bug down, my version of Chrome is 48.0.2564.116 (64-bit) on OSX El Capitan. A coworker told me about the issue and I had to switch to incognito mode before I started seeing the issue.

Upvotes: 1

Related Questions