Typekit.com uses Rosewood Fill and Chaparral

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!

Print, April 2010, p.80. Click image for full size.

Print doesn’t seem to put much of their magazine’s content on their website, so I took the photo above. If you don’t feel like reading the grainy iPhone photo (no, I wasn’t about to spend $20 just to stroke my ego), here’s the full text:

Occasionally during a web project’s construction phase, the designer will decide that the type doesn’t look quite right. This is often due to slight but still noticeable differences between Photoshop’s text rendering and that of the multiple browsers a site has to support. In response, the designer sometimes has to do multiple rounds of slight tweaks to size and spacing.

To help with this, Soma Design’s Matt Wiebe offers the FontFriend bookmarklet. Just drag it to your browser toolbar, activate it on the page you want to edit, and a panel is exposed that can be used to edit a selection of the most common browser text settings. A few simple presets are offered for text that is affected, but the power of the jQuery Javascript library’s selector engine is available for more specific selections. (An explanatory link is provided from the panel, but it’s anything you could do with basic CSS syntax, and more.)

Ideally, the task of using FontFriend would be handed off tot the designer directly, who could send final modifications straight to production.

For more progressive web designs using the new @font-face possibilities, the bookmarklet can take care of a new feature in Firefox 3.6 that allows you to drag a font file directly onto the panel to select the family of your choice.

What you are looking at is a highly customized WordPress installation. Although WordPress is usually associated with blogging, I’m happy to use it to manage an entire website. The incredible theme and plugin community surrounding it makes it just fantastic to work with.

Now, for a little more spit and polish.