Soma Design

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 Type­kit-enabled page will automag­i­cal­ly 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 design­er 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 did­n’t play well with Type­kit, as I dis­cov­ered when redesign­ing my per­son­al blog. I’d hacked in a fea­ture for my own use, but was nev­er real­ly hap­py 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 lat­er, the fea­ture was inte­grat­ed. Just acti­vate Font­Friend on a Type­kit-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­i­ly cur­rent­ly active on your page. See a demo. This only applies to rules declared in stylesheets on the same domain due to cross-domain secu­ri­ty restric­tions, which means that most third par­ty web­font ser­vices are left out in the cold.

Oth­er 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 numer­ic access to all weights
• All drop­downs have arrow tog­gles beside them for speed­i­er 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­i­ly list
• Drag and drop now uses the asyn­chro­nous Fil­eRead­er API, which should be much more per­for­mant, espe­cial­ly when drag­ging in mul­ti­ple font files at once. (Thanks to Ryan Sed­don for his work on Font­Dra­gr that showed me the way.)
• The pre­vi­ous­ly miss­ing Font Style mod­ule is now includ­ed. Hel­lo italics.
• Big reor­ga­ni­za­tion of the code. It’s still a bit squir­re­ly, but bet­ter orga­ni­za­tion will make it eas­i­er to add (good) fea­tures in the future.

I’d love to sup­port oth­er 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). Oth­er ser­vices: please let me know if/when that changes!