Google Web Fonts don't load in Chrome for iOS

ios css google-chrome responsive-design google-webfonts
andrewpthorp picture andrewpthorp · Dec 9, 2012 · Viewed 11.5k times · Source

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

Answer

Dave picture Dave · Dec 18, 2012

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).

Related questions

position: fixed doesn't work on iPad and iPhone

I have been struggling with fixed positioning in iPad for a while. I know iScroll and it does not always seem to work (even in their demo). I also know that Sencha has a fix for that, but I couldn't …

Read More
How do I remove the blue styling of telephone numbers on iPhone/iOS?

Is there a way to remove the default blue hyperlink colour from a telephone number when viewed on an iPhone? Like a specific Mobile Safari tag or CSS to add? I only have this in place for the number: <…

Read More
Styling input buttons for iPad and iPhone

I'm using CSS to style the input buttons on my website, but on IOS devices the styling is replaced by Mac's default buttons. Is there a way to style buttons for iOS, or a way to maybe make a hyperlink …

Read More