Hello type nerds! Have you ever had a moment where you knew a site used Typekit but you didn't recognize the fonts? I know I have.
For every site that uses Typekit, they produce a colophon that gives you the name of the font, a specimen, and other helpful information. Unfortunately for us, not everyone links to their colophon. I know, right?
That's where my Typekit Colophon Bookmarklet comes in. After adding it to your bookmark toolbar, all you do is click and it will open the site's colophon. If the site doesn't use Typekit (lame-o's), it'll pop up a little alert to let you know.
Install It
Installing it, at least on the desktop, is easy. All you do is click and drag the following link to your bookmark toolbar. If you're dying to install this on your iDevice, it's a pain in the ass, but you can try and follow Instapaper's instructions (but use my code, not theirs).
Drag me to your toolbar: Typekit Colophon
Make It Better
I've put the code up on Github as a gist. Please, feel free to fork it and make improvements. I've tried it in a bunch of places, but I'm sure the code could be cleaner and it'll probably break in some edge cases.
Update (11/15/10): On Friday, my friend Mark Pascal answered my call for a bookmarklet powered by a gist, enabling easier updates. Then Phil Dokas forked my code and prettied up the javascript. I combined the two to so I can improve the bookmarklet. I've also updated the code above to use this new bookmarklet code. Thanks guys!
Oh, and if you're like me and feel like you're just ont cusp of understanding scoping of Javascript functions, I recommend the Functional Javascript article from hunlock.com.
11/12/10 2:00 PM
Incredibly useful. Thank you!
11/12/10 2:20 PM
Nice.
11/12/10 3:58 PM
Nice job!
11/12/10 8:22 PM
Thank you. Great bookmarklet.
11/13/10 8:48 PM
I made a fork that you might enjoy: https://gist.github.com/675469
Basically it doesn't leave variables defined in the global namespace, uses regex to find the kit ID, and should be a bit quicker on pages with many scripts. Hope you like it!
11/13/10 8:49 PM
One more time with clickability! https://gist.github.com/675469
11/15/10 11:53 PM
That's swell.
11/15/10 11:57 PM
@Phil: Thanks for that! I incorporated your suggestions into a new and improved version of the bookmarklet. Also, I love when people on the internet are helpful!
11/16/10 12:30 AM
No offence but I think the typekit api example bookmarklet works fine to me.
https://github.com/typekit/typekit-api-examples/tree/master/bookmarklet
11/16/10 12:43 AM
@Sekimura: Yes! I forgot you tweeted about that. That's a handy one too. For some reason, I prefer going to the Colophon, but it goes to show that if I had put a little bit of effort into searching, I would have found what I needed right under my nose.
11/16/10 3:00 AM
very cool. but not using typekit doesn't necessarily make you a lame-oh. using typekit when you can use @font-face cross-browser instead and adding extra weight to the page inevitably affecting the end user, that is lame-oh.
using them wisely, is magnifique.
also, the label next to this textarea said i'd have the option to sign in using openid, but when i clicked sign in, that option wasn't given to me.
11/16/10 4:13 AM
Thanks for the bookmarklet!
One thing I noticed; I serve a webfont through typekit that I purchased from Fontshop. It is however not recognized in this bookmarklet. With more externally purchased webfonts being served through typekit, maybe there's a way to recognize these as well?
11/16/10 9:03 AM
@Bart-Jan: Unfortunately, that looks like an issue with Typekit proper. I'm guessing they don't have all of the information needed to display an entry for that font in the colophon. If you look at the TimesSkimmer, you'll see it shows nothing on the colophon since they use a custom font.
11/16/10 10:30 AM
So cool! Thanks. :)
11/16/10 5:43 PM
You may want to change http to http(s?) in your regular expression so that it matches on SSL sites as well.