FontFriend 2.5

Font­Friend was designed and cod­ed as dur­ing the twi­light of the pre-web­font era. In fact, it was abstract­ed 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­op­er hat more than my design­er one of late.

But, as I’ve been tin­ker­ing with pos­si­ble redesigns of my per­son­al site, I’ve been play­ing around with web­fonts a lot, a work­flow that nev­er crossed my mind when design­ing it. So, rather than putting my design ener­gy to work on my site design, I decid­ed to extend Font­Friend to sup­port cus­tom Font Fam­i­ly lists.

Font­Friend’s new cus­tom font fam­i­ly list

This is a fea­ture for front-end designers/developers, so there is no user-fac­ing 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 whichev­er nota­tion suits your work­flow. See it in action right now by vis­it­ing the updat­ed 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 dai­ly basis. Thank you!

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

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

One Trackback