asked on

Google Fonts Not Available Over HTTPS

Good morning, Experts! I have been working on a number of things with my company's Web site when I suddenly noticed that the fonts I have been using from Google Fonts weren't appearing on the published site. I have the following code at the top of my <HEAD> section:

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Yanone+Kaffeesatz" />

Open in new window

I've removed the protocol identification from the beginning of the URL per suggestions I've found from my own searches to prevent the browser from complaining about mixed content (secure & non-secure).

Now, if I explicitly add the "http" to the URL of the Google Fonts link, or if I use HTTP instead of HTTPS in the address to my site in the browser, the fonts show up exactly as they should. However, if I change either of these to use HTTPS, the fonts won't show up. From what I can tell so far, it appears that there may be some sort of issue with Google Fonts availability over the HTTPS protocol, but I would think that I would see a whole lot more about this type of an issue if that were the case.

Can anyone who is using Google Fonts verify for me whether or not they are having a similar issue when trying to access them over the HTTPS protocol? Thanks so much.

EDIT: I just had my Network Admin test it from outside our internal network, and he didn't seem to have any problem. It looks like I may have something going on in our firewall, or something.

ASKER CERTIFIED SOLUTION

colly92002

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

G_Hosa_Phat

ASKER

@colly92002 - Thank you for your suggestions. I must not be thinking clearly this morning because I hadn't even thought to bring it up in a different browser. It worked just fine in Firefox (9.0.1). The problem, it seems, is only in IE 11 (11.0.9600.17105). GREAT!

I tried the JavaScript version of the code for my site with no change. I didn't however go to the next step of trying the WebFont Loader as I didn't really want to mess with the @font-face stuff.

Since it's only happening in IE, maybe there's a strange security setting or something that's blocking the font from loading...

SOLUTION

colly92002

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

G_Hosa_Phat

ASKER

@colly92002 - I've tested it on my Windows XP virtual machine (using IE 8), and it works just fine. It does seem to be limited to IE 11, or some version(s) between 8 and 11.

I have tested the JavaScript code, but it doesn't seem to make any difference. I tested the <STYLE> code as follows, but no change:

@import url(//fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

Open in new window

Just like before, it works if I'm using the HTTP protocol, but as soon as I switch to HTTPS, it fails to retrieve the font.

I'm still looking around for possible solutions, but at least I have the issue narrowed down a bit, and I can stop chasing so many rabbit trails.

EDIT: Looks like there may be something else to look at. This bug report on Google's font directory page shows a number of people dealing with issues with their fonts in IE. Most of them are talking about IE 8, but I wouldn't doubt that there may be something similar within IE 11.

EDIT #2: I just spoke with my Network Admin again, and he said he's looking at the pages under IE 11 and Safari, and he doesn't see the issue. It looks like the issue is specific to my machine for some reason. I'm going to try a couple more things and see what I can come up with.

G_Hosa_Phat

ASKER

Well, it seems that the issue is specific to IE 11 on my machine. Thanks for all of your help. I feel like a bit of an idiot right now, because I should've thought about all of the basic suggestions you offered. Even so, I truly appreciate your assistance.

colly92002

No problem, glad to help.