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

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.