Fonts looks different in Firefox and Chrome

Question

I am using Google Web Font\'s PT-sans

font-family: \'PT Sans\',Arial,serif;

but it looks different in Chrome and Firefox

Is there

Answer 1

For the ChunkFive font from FontSquirrel, specifying "font-weight: normal;" stopped Firefox's rendering from looking like ass when used in a header. Looks like Firefox was trying to apply a fake bold to a font that only has one weight, while Chrome was not.

Answer 2

css reset may fix the problem, I am not sure .

http://yuilibrary.com/yui/docs/cssreset/

Answer 3

There are a few fixes. But usually it can be fixed with:

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Sometimes it can be due to font-weight. If you are using a custom font with @font-face make sure your font-weight syntax is correct. In @font-face the idea of the font-weight/font-style properties are to keep your font-family name across different @font-face declarations while using different font-weight or font-style so those values work properly in CSS (and load your custom font -- not "fake bold").

I've seen -webkit-text-stroke: 0.2px; mentioned to thicken webkit fonts, but I think you probably won't need this if you use the first piece of code I gave.

Answer 4

I had the same issue for a couple of months. Finally, it got worked by disabling below settings in Chrome browser's settings.

Set "Accelerated 2D Canvas" to "Disabled" (In the browser's address bar, go to chrome://flags#disable-accelerated-2d-canvas, change the setting, relaunch the browser.)

Since the fix for this issue has clearly changed, I would suggest in general turning off any hardware-accelerated text-rendering/2D-rendering features in the future if this fix stops working.

On Google Chrome 55, this issue appears to have cropped up again. As anticipated, the fix was disabling hardware acceleration, it just changed locations.

The new fix (for me) appears to be:

Settings -> Show advanced settings... -> System UNCHECK "Use hardware acceleration when available"

https://superuser.com/questions/821092/chromes-fonts-look-off