Does an external monitor affect the clarity of the Chrome font?

Question

I'm having font clarity issues in Google Chrome. I am developing a website at www.transitioncville.org using @ font-face web fonts and FontAwesome to render text and icons in my navigator. When my external monitor is connected (but the Chrome window is on my MacBook display) and I go to my website, I see crisp, clear texts / icons:

If I turn off the external monitor, I continue to get clear text / icons (even if I refresh the page or clear the cache). But if I open a new Chrome tab, and my external monitor is turned off and moves to the same site, the text and icons suddenly blur (see below). I reproduced this on other machines. What could be the reason for this? The problem is not limited to FontAwesome, as you can also see the text.

Neither Safari nor Firefox have any problems for what it costs.

Google Chrome 25.0.1364.172 (Official Build 187217) Mac OS X WebKit 537.22 (@ 145275) JavaScript V8 3.15.11.17 Flash 11.6.602.180 Mozilla User Agent / 5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit / 537.22 (KHTML, for example , Gecko) Chrome / 25.0.1364.172 Safari / 537.22

Answer 1

I'm not sure what is going on specifically, but sometimes the unusual problems with displaying browser fonts disappear when the following CSS is used. Try adding this to the global css file included on the page.

html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; }