FontFriend 3.0 Released

I’m pleased to announce the imme­di­ate release of Font­Friend 3.0, the Type­kit inte­gra­tion edi­tion. Invok­ing the book­marklet on any Typekit-enabled page will automag­i­cally throw all the fonts in your kit into the cus­tom fam­i­lies list. I’ve set up a demo page with Font­Friend embed­ded and a big Type­kit kit.

Typekit.com uses Rose­wood Fill and Chaparral

My main imag­ined use-case for this fea­ture is the designer try­ing to test out a vari­ety of web­fonts on their page. I’d intro­duced cus­tom lists in Font­Friend 2.5, but they didn’t play well with Type­kit, as I dis­cov­ered when redesign­ing my per­sonal blog. I’d hacked in a fea­ture for my own use, but was never really happy with it.

But then I remem­bered that Type­kit has an API.  They even have an exam­ple book­marklet that lists every font in your site’s kit, doing most of the work for me. A cou­ple of short week­end cod­ing ses­sions later, the fea­ture was inte­grated. Just acti­vate Font­Friend on a Typekit-enabled page and you’ll see the Type­kit logo and your kit’s fonts in the cus­tom list. Check out the demo page to see this in action on a page with a big Type­kit kit.

But wait, there’s more! Font­Friend 3.0 also pop­u­lates your cus­tom font list with every @font-face–declared font fam­ily cur­rently active on your page. See a demo. This only applies to rules declared in stylesheets on the same domain due to cross-domain secu­rity restric­tions, which means that most third party web­font ser­vices are left out in the cold.

Other 3.0 features/changes:

  • Reor­ga­ni­za­tion of the mod­ules to bet­ter suit my imag­ined opti­mum workflow
  • Font weight is now a drop­down to give you numeric access to all weights
  • All drop­downs have arrow tog­gles beside them for speed­ier chang­ing. (I dis­like the tedious “click, move mouse, click again” flow of drop­downs, so this should help.)
  • Drag and dropped @font-face fonts now get thrown in the cus­tom font fam­ily list
  • Drag and drop now uses the asyn­chro­nous Fil­eReader API, which should be much more per­for­mant, espe­cially when drag­ging in mul­ti­ple font files at once. (Thanks to Ryan Sed­don for his work on Font­Dragr that showed me the way.)
  • The pre­vi­ously miss­ing Font Style mod­ule is now included. Hello italics.
  • Big reor­ga­ni­za­tion of the code. It’s still a bit squir­rely, but bet­ter orga­ni­za­tion will make it eas­ier to add (good) fea­tures in the future.

I’d love to sup­port other web­font ser­vices, but none of them have APIs that can do what I’ve done with the Type­kit API (or at least not that I’ve dis­cov­ered). Other ser­vices: please let me know if/when that changes!

One Comment

  1. Posted May 11, 2011 at 1:58 pm | Permalink

    Hey Matt, love this book­marklet, thanks!

    It would be great if it included a link to your demo page within the book­marklet so we can eas­ily test fonts on that page also.