Why is iOS Safari adding extra letter-spacing? Why is iOS Safari adding extra letter-spacing? ios ios

Why is iOS Safari adding extra letter-spacing?


I found the solution in this question: iOS 4.2+ webfont (ttf) 's bold font-weight rendering bug

Mobile Safari is buggy rendering faux font weights, if you don't set the font-weight (to eg. font-weight: 400 or font-weight: normal) You need to specifically set the css font weight for it to render correctly in mobile safari.

This is the solution.

h2 {  font-weight: 400;}


Note that Google Web Fonts only exports the regular weight (400) by default, which can lead to Mobile Safari (and other browsers) being forced to impose faux bold.

To explicitly export bolder weights, select "CUSTOMISE" in the Google Web Font font selection pane, manually check each additional weight you require, and use the updated embed code.

([Screenshot: Google Fonts customise pane)]1


I've just had a similar problem which I resolved. I'm using the Lato font family from Google Fonts and Safari was adding letter spacing even when explicitly using font-weight: 600.

I imported only the font weights 400, 500 & 600, as these were the only weights I was using. After many hours I just decided to try also importing font weight 700 and this fixed my issue... Safari was no longer adding letter spacing when using font-weight: 600!

So even though I explicitly use font-weight: 600, Safari seemed to need the 700 variant as well to render the 600-weighted font properly. Very odd.