CODEWITHSUNDEEP
htmlioscsssafari
Andreas
Andreas

Reputation: 2397

Why is iOS Safari adding extra letter-spacing?

I think I have found a web rendering bug for Google Fonts in Mobile (iOS 8) Safari. It seems to me that Mobile Safari adds a tiny bit of letter-spacing to all text that uses Google Fonts, or that it uses another font. It doesn't matter which Google Font I try (Open Sans). It renders correctly on all modern browsers. Tested Android, FF, Chrome, Safari.

Try to load this page on a iOS device to see what I mean. See also see code and screenshot. See this link for live review: https://dl.dropboxusercontent.com/u/430406/Temp%20%5Bok%20to%20delete%5D/Checking%20Font/index.html 

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>

<body>
  <h2 style="font-family: 'Roboto'">Roboto: Looks like it gets a bit extra line-spacing in iOS Safari, though this is not possible to find in web inspector</h2>
  <h2 style="font-family: 'Arial'">Arial: Works fine in iOS Safari</h2>
</body>

</html>

enter image description here

Upvotes: 34

Views: 33416

Answers (4)

king roc
king roc

Reputation: 1

Need to specify font-weight

@font-face {
    font-family: 'Din';
    src: url('./DinRoundRegular.otf');
    font-size: 16px;
    font-style: normal;
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: 'Din';
    src: url('./DINRoundPro-Medi.ttf');
    font-size: 16px;
    font-style: bold;
    font-weight: 700;
}

Upvotes: 0

Donovan Nevard
Donovan Nevard

Reputation: 11

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.

Upvotes: 1

Andreas
Andreas

Reputation: 2397

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;
}

Upvotes: 77

Daniel Jones
Daniel Jones

Reputation: 683

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

Upvotes: 20

Related Questions