$.getJSON and google fonts API stops working in internet explorer with jQuery versions greater than 1.4.4

Question

I have spent almost the whole day trying to find a solution to this problem.

I have successfully written code to dynamically retrieve and display the whole lot of fonts

Answer 1

It seems to be IE that is blocking connection to hosts outside of your site's domain. This is due to the Same Origin Policy. This is usually not a big deal with the latest and greatest browsers out there, although it can still occur with any browser. I tested your code using JSFiddle and it threw an error about same origin in Chrome 21.

Normally, the way to fix this is to use JSONP. Unfortunately, the Google Webfonts API does not support JSONP. The best way that I can think about getting that data cross-browser is to download the JSON using a server-side programming language such as PHP. From there, you can echo the JSON out to the page and use the $.getJSON function to grab that data locally on your server.

EXAMPLE: fontApi.php (local file on your server)

<?php
$json = file_get_contents('https://www.googleapis.com/webfonts/v1/webfonts?key=XXXXXX');
die($json); // prints JSON to the screen that jQuery can use
?>

Then use the following jQuery...

$.getJSON('fontApi.php', function(json) {
    //your code
});

Hopefully this helps you out :)