CODEWITHSUNDEEP
ioscssfontssafaritext-rendering
Aen Tan
Aen Tan

Reputation: 3345

Inconsistent text rendering between iOS and Mac

iOS 8 Safari (Retina) vs Mac OS X Yosemite Safari (Retina)

screenshot

The one on the Mac is the desired rendering i.e. kerning and ligatures. The one on iOS seems too loose (this is Simulator, looks the same on device). The font is Lato served from Google.

Any way to make the text on iOS look as good as on the Mac?

UPDATE

Seems like it could be a problem with Lato. I tried different fonts i.e. Proxima Nova and they looked the same on iOS and Mac OS, despite not having ligatures. I also can't get iOS to render ligatures in Lato no matter what. This is my CSS.

text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;

Upvotes: 0

Views: 667

Answers (1)

Aen Tan
Aen Tan

Reputation: 3345

SOLVED

Use Typekit instead of Google font.

enter image description here

You get what you pay for.

Here's the code which did the trick.

<script>
    WebFontConfig = {
      typekit: { id: 'xzw9acq' } // Typekit kit containing Lato
      //google: { families: ['Lato'] }
    };
    ... rest of font loader script
  </script>

Upvotes: 1

Related Questions