@font-face imports and mobile web-kit woes: why God why?

over 3 years ago from , Designer

Updated: pretty slick solution from Jake Archibald.

Thanks to Zell Liew for the tip!

I'm trying to use a version of a font with a larger character set: a non Google fonts version of Work Sans (large files is bad yadda yadda, but I like custom arrows).

Loading it up on a desktop screen shows no issues at all: http://i.imgur.com/cnKd48c.png

Loading up on a mobile device (e.g. iOS 10.3.1) for some reason screws with the letter spacing: http://i.imgur.com/cnKd48c.png

So far I've tried making sure my @font-face imports are correct, removing any text-rendering or incorrect font-weight declarations, trying different formats from ttf to svg, and exporting webfonts with (yikes) kerning data removed. No dice. Frustrating as all get out.

I'm getting ready to look into targeting touch devices to override the default letter spacing. But that seems like overkill.

Anybody have more experience with this issue? What am I missing? Is there a fix or a magic I haven't found?


  • Brad Siefert, over 3 years ago

    This may not help you at all, but I had a similar issue on Chrome vs. Safari, everything looked great in Chrome, but Safari had this odd kerning issue, and it turned out to be that the framework I was using had set font-weight: bold; to it because it was a label. Fixed my issue. Might not be whats happening here, but something to look at.

    1 point
  • Andrew Ciobanasiu, over 3 years ago

    Did some reaching out and Zell Liew suggested this post on Jake Archibald's blog: Combining fonts

    Turns out the Google font API is enough magic to work with. Especially if I don't want to build my own character set.

    Hope someone finds this bit of info useful like I did!

    0 points