FontFriend 2.5

Font­Friend was designed and coded as dur­ing the twi­light of the pre-webfont era. In fact, it was abstracted out of some code I’d been using while devel­op­ing the CSS font stacks for my Word­Press theme The Eru­dite. I haven’t been using it much as of late, as I’ve been wear­ing my devel­oper hat more than my designer one of late.

But, as I’ve been tin­ker­ing with pos­si­ble redesigns of my per­sonal site, I’ve been play­ing around with web­fonts a lot, a work­flow that never crossed my mind when design­ing it. So, rather than putting my design energy to work on my site design, I decided to extend Font­Friend to sup­port cus­tom Font Fam­ily lists.

FontFriend’s new cus­tom font fam­ily list

This is a fea­ture for front-end designers/developers, so there is no user-facing UI for this fea­ture. Instead, on a site that you want to test web­fonts on, you can pro­vide that Font­Friend will rec­og­nize in one of 2 ways:

1. A data– attribute on the body element

<body data-ff-families="OFL Sorts Mill Goudy,PT Serif,Crimson,Tinos,League Gothic">

2. A JavaScript array

The nice part about the JS method is that you can use your JS con­sole to set the var before invok­ing FontFriend.

  var fontFriendFamilies = ["OFL Sorts Mill Goudy", "PT Serif", "Crimson", "Tinos", "League Gothic"];

That’s it! Use whichever nota­tion suits your work­flow. See it in action right now by vis­it­ing the updated Soma Web Font Spec­i­men and invok­ing the book­marklet (you’ve already installed it, right?).


  1. Posted January 13, 2011 at 2:57 am | Permalink

    Incred­i­ble work Matt. This has got to be one of the most use­ful web typog­ra­phy tools I’ve seen. I’ll be using this on a daily basis. Thank you!

  2. Matt
    Posted January 13, 2011 at 10:19 am | Permalink

    @Dar­ren cheers, glad you find it useful.

One Trackback