The font gets thicker in browsers

Question

I use the Open Sans font on the website, but it looks much thicker in all browsers than in Adobe Illustrator (see attached images). Why is this and is there a way I can get the font in the browser to display thinner, please?

Note Both browsers and Illustrator display in bold weight (600)

Answer 1

The question was with a pseudonym. The following css solution will work for safari, chrome and firefox:

-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; 

Answer 2

Make sure you turn on the light (300) and normal (400) weight for Open Sans, then you can simply:

 body { font-family: 'Open Sans', sans-serif; font-weight: 300; /* Or 400, if 300 is too light. */ } 

Answer 3

Open Sans Webfont is available in 10 styles. It seems to me that the browser displays in bold. This should be regular, and you should go well.

Take a look at fontsquirrel

http://www.fontsquirrel.com/fonts/open-sans

Answer 4

The simple answer is that there is no fix. If you load and name the right style and weight correctly, then sometimes things are simply rendered differently between adobe and web browsers (or browser to browser). Your options are to go to 400 weight or learn to love courage.