Fonts in the browser on Ubuntu look look squashed/stretched compared to Windows/OSX.

This image shows exactly what I mean: http://i.stack.imgur.com/suUXX.png

I installed msttcorefonts and configured both Chrome & FF to use Microsoft fonts (Arial, Times New Roman) instead of the default ones.

While MS fonts made web pages appear a bit different, regardless of what font it was the squashed/stretched look remained. FreeSans looks a little different from Arial, but it too is rendered squashed/stretched like Arial on both FF & Chrome. Opera renders the Wikipedia page differently from FF & Chrome, but the fonts looks squashed/stretched on it as well.

I used to run Kubuntu prior to switching to Ubuntu and at some point I managed to get the fonts on Chrome (only Chrome) look exactly like in the image on the left. I have no idea how I did it though. Firefox and Rekonq retained the squashed/stretched look.

I had been using Rekonq for a while, then switched to FF. While using both browsers I had done various things to get the fonts to look better on them with no success - like installing MS fonts & configuring both browsers to use them. I then, after some time, installed Chrome and the fonts magically looked perfect on them - just like on right-hand side of the image. In fact, the font smoothing looked better (to my eye) compared to Windows and OSX. All 3 OSes use subtly different font smoothing strategies and the differences stand out.

Later, I formatted & installed Ubuntu 12.04.

The first thing I did was install msttcorefonts & then install Chrome. To my dismay, the fonts on Chrome looked just as squashed/stretched as it did in Firefox. There's no browser (except Wine Internet Explorer) that renders fonts properly on my Ubuntu setup right now.

Fixing this is definitely possible, since I was able to do it on Kubuntu, but apparently it requires some mysterious tweaking. Would anyone be willing to help me out?