I’m pleased to announce the immediate release of FontFriend 3.0, the Typekit integration edition. Invoking the bookmarklet on any Typekit-enabled page will automagically throw all the fonts in your kit into the custom families list. I’ve set up a demo page with FontFriend embedded and a big Typekit kit.
My main imagined use-case for this feature is the designer trying to test out a variety of webfonts on their page. I’d introduced custom lists in FontFriend 2.5, but they didn’t play well with Typekit, as I discovered when redesigning my personal blog. I’d hacked in a feature for my own use, but was never really happy with it.
But then I remembered that Typekit has an API. They even have an example bookmarklet that lists every font in your site’s kit, doing most of the work for me. A couple of short weekend coding sessions later, the feature was integrated. Just activate FontFriend on a Typekit-enabled page and you’ll see the Typekit logo and your kit’s fonts in the custom list. Check out the demo page to see this in action on a page with a big Typekit kit.
But wait, there’s more! FontFriend 3.0 also populates your custom font list with every
@font-face-declared font family currently active on your page. See a demo. This only applies to rules declared in stylesheets on the same domain due to cross-domain security restrictions, which means that most third party webfont services are left out in the cold.
Other 3.0 features/changes:
- Reorganization of the modules to better suit my imagined optimum workflow
- Font weight is now a dropdown to give you numeric access to all weights
- All dropdowns have arrow toggles beside them for speedier changing. (I dislike the tedious “click, move mouse, click again” flow of dropdowns, so this should help.)
- Drag and dropped @font-face fonts now get thrown in the custom font family list
- Drag and drop now uses the asynchronous FileReader API, which should be much more performant, especially when dragging in multiple font files at once. (Thanks to Ryan Seddon for his work on FontDragr that showed me the way.)
- The previously missing Font Style module is now included. Hello italics.
- Big reorganization of the code. It’s still a bit squirrely, but better organization will make it easier to add (good) features in the future.
I’d love to support other webfont services, but none of them have APIs that can do what I’ve done with the Typekit API (or at least not that I’ve discovered). Other services: please let me know if/when that changes!
Hey Matt, love this bookmarklet, thanks!
It would be great if it included a link to your demo page within the bookmarklet so we can easily test fonts on that page also.