As part of our ongoing work on the Typekit API, we’ve added support for JSON with callbacks. This means you can now easily use Typekit data in your Javascript code.

JSON with callbacks

JSON with callbacks, also known as JSONP, is an alternative to XmlHTTPRequest that avoids the same origin policy. In other words, it allows code on your site to request data from our site.

Most libraries have built in support for JSONP. For example, we can fetch information about Typekit’s library using jQuery:

var url = "http://typekit.com/api/v1/json/libraries/full?callback=?";
$.getJSON(url, function(data){
  var count = data.library.pagination.count;
  alert('There are ' + count + ' fonts in the full library');
});

The URL we’re requesting includes a callback parameter that tells the Typekit API you want JSONP output. jQuery does the hard work of requesting the data and then turning it into a Javascript data structure for you to read from.

A step-by-step example

So what can we use this for? One small but useful thing we’ve built is a bookmarklet that tells you which Typekit fonts are used on a page.

We start out by iterating over the page looking for the Typekit embed code:

var kitId;
$('script').each(function(index){
  var m = this.src.match(/use\.typekit\.com\/(.+)\.js/);
  if (m) {
    kitId = m[1];
  }
});

One we have the kit ID we make an API call for more information about that kit:

$.getJSON("http://typekit.com/api/v1/jsonp/kits/" + kitId 
          + "/published?callback=?", function(data){
  // …
});

Then we use that data to generate the HTML for a box containing a list of font families used in the kit:

var box = $("
Typekit fonts used on this page:
")
$.each(data.kit.families, function(i,family){
  var item = $('
' + family.name + '
');
  item.appendTo(box);
});

We then give that box some style, and insert it into the page body:

box.css({
      'border':"1px solid #ddd",
      'background':"#ffffff",
      'color': '#666',
      'position': 'absolute',
      'right': '5px',
      'top':'5px',
      'width': '200px'
});
popup.appendTo('body');

And we’re done!

Learning more

You can view the full code for the bookmarklet and instructions on how to use it over at github. You can also check out the full documentation on the output formats supported by the Typekit API.

If you have questions or feedback, let us know in the comments, or jump into the typekit-dev google group. We look forward to hearing from you.