Menu
I am using the Open Sans font on a web site, but it appears much thicker in all browsers than in Adobe Illustrator (see attached images). Why is this and is there any way I can get the font in the browser to display "thinner" please?
Note Both the browser and Illustrator are rendering the Semibold weight (600)
270
If you notice that your text fonts look different on different browsers, it is because different browsers and devices use different rendering engines, and therefore may result in minor differences. Sometimes these minor differences can have a domino effect.
To stop this happening make sure in your CSS you have font-weight: normal and font-style: normal in your @fontface code block. You then need to apply the necessary styles to the HTML elements. And then add the specific styles for each element that uses that font.
Go to Control Panel > Appearance and Personalization > Display > Adjust ClearType text (on the left). Check the box entitled “Turn on ClearType.” After going through a short wizard, this will fix some of the text rendering issues in Chrome.
I recommend not using it, and instead if you're looking to get a lighter version of the font then use the font-weight to control this so that it appears nicely across both Mac and Windows, and works across all browsers without the need of a browser prefix.
The issue was with aliasing. The following css solution will work for safari, chrome and firefox:
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
Make sure you're including the light (300) and normal (400) weights for Open Sans, then you can simply:
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300; /* Or 400, if 300 is too light. */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
