Google Web Fonts don't load in Chrome for iOS

Question

When I use Google Webfonts, they load fine on every browser I care about, EXCEPT Chrome/iOS. This seems odd, as it works fine on Chrome for Mac and Safari for iOS, so I don't think it's an iOS problem or a Google Chrome problem. It seems to be specific to Chrome/iOS.

Any ideas, or ideas on HOW to troubleshoot this, would be great!

Thanks!

EDIT

I am using Google Web Fonts hosted on Google, with the following:

<link href="http://fonts.googleapis.com/css?family=Leckerli+One" rel="stylesheet" type="text/css" />

In my font (SASS), I am using the following:

h1
  font-family: "Leckerli One", cursive

Kimon

How are using Google web fonts – as remotely hosted by Google, or on your own server? (This often makes a difference.) Which fonts? What is the exact code you are using? – Rozalie

Have you tried downloading the font, hosting it yourself and seeing if it displays then? MIght be worth a shot. – Timehonored

Andrew- Do you have a link to your site? I'm currently using Google Webfonts on my site and they work in Chrome on iOS. I've also tested with that font and it seems to work: djfarrelly.com/test – Crinkle

I confirm that this font works correctly even on iOS's Chrome (all latest versions). Tested it all ways in and out. Looks like the problem is in your code (or SASS related). Can you show me/us your website so I can parse its code manually so find the issue? – Stanley

When you open the developer tool console If there is something like "OTS parsing error", congratulations, here's a solution github.com/googlei18n/sfntly/issues/52 github.com/googlei18n/sfntly/pull/54 – Pericycle

Answer 1

I'm seeing the same issue. Hosting the font files on my own server and rewriting the @font-face rules to match solved the issue for me, both with my local dev server and in prod.

I don't know the cause; my best guess would be some same-origin issue that's enforced differently in UIWebViews (iOS Chrome being a UIWebView due to App Store rules).

Smutchy

answers should really answer the question, if it doesn't and you want to say something, please at a comment (you can do this if you have reputation of 50) – Diameter

I solved the issue, and answered his original question. If I didn't answer his deep theory followup then I would expect to not receive the bounty, and everything would be just in the world. – Smutchy

Answer 2

You can use the Google Fonts API Loader which will detect the user's browser and send back appropriately formatted CSS.

Sample code is available in the first response on this Stack Overflow question.

This will allow both Safari and Chrome (and other UIWebView-based browsers) to display the font correctly.

Note: if you want to store the fonts locally, as @Dave suggested, this CSS should work.

Behre

Answer 3

IOS devices use TTF formats only (or OTF if they follow the developer guidelines below). That font is being served as WOFF, EOT and OTF (assumably not following the guidelines) . There are some services that will give you other versions. Try specifying the font using @font-face and see if that fixes the issue! Fontsquirrel has an @font-face generator to do the heavy lifting.

In regards to the follow up question. There are some developer documentation from Apple on their implementation of TrueType Fonts. It can be found here. Essentially, TTF formats store the font as sfnt resources. The only other font format that can do this is OpenType's offset table sfnt wrapper. Because IOS reads fonts using sfnt wrappers, you will run into issues with fonts that are not stored in this way. (Sorry for all the jargonny talk).

Carburet

Not my experience: in iOS6 at least, WOFF fonts worked fine (in Safari, and in Chrome after I served them from my own server). See my answer on this question. – Smutchy

Answer 4

In the CSS you may use

!important

Example:

@font-face {
  font-family: 'Monda' !important;
  font-style: normal !important;
  font-weight: 400 !important;
  src: local('Monda Regular'), local('Monda-Regular'), url(http://themes.googleusercontent.com/static/fonts/monda/v1/sk05J8GA1NvUxDnk43EgAQ.woff) format('woff') !important;
}

Garfield

Please elaborate as your answer does not make sense at all. – Stadler

He is suggesting that the CSS instance here is being over written further down on in the style sheet (hence:CSS-Cascading Style Sheet), thus you may need to use !important to override that; however I don't believe this is your problem. – Sabo

Answer 5

In case anyone else still sees this issue - a font not loading in Chrome on iOS 9 or older - double check that the font is imported as a css file, and not as a js file. Fonts.com will give you the option to import fonts as js, which won't get picked up on Chrome / iOS 9 or below. Changing my import to css fixed this for me.

Wax

Answer 6

For me works add in php page:

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Trocchi');
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
</style>

Clastic

Answer 7

I've got similar problem with UIWebView lately. I made additional changes to both iOS app and web source, nothing helped.

Finally fixed it by simply changing Google Font's link to https.

Renner