Soma FontFriend Bookmarklet Released

I’ve been inspired by a few dif­fer­ent arti­cles to exper­i­ment with font stacks, but I want­ed a way to quick­ly see how dif­fer­ent font fam­i­lies looked with­in the con­text of my design right in the brows­er. For instance, how well does Geor­gia work as a fall­back for Con­stan­tia? (Pret­ty well.) How sim­i­lar are Hel­veti­ca Neue and Hel­veti­ca? (The lead­ing is sur­pris­ing­ly very different.)

To this end, I’ve released a book­marklet that aids in the process of test­ing out dif­fer­ent fonts. You can start using it right now by drag­ging it to your book­marks toolbar:

Font­Friend

You can start using it imme­di­ate­ly, or see the project page for more info.

Please report any feed­back, issues or fea­ture requests by com­ment­ing on this post, via Twit­ter, or on the Google Code project page.

11 Comments

  1. Posted May 7, 2009 at 6:50 am | Permalink

    i think font fam­i­ly tahoma good enough at least for my web 😛

  2. Steven
    Posted May 31, 2009 at 7:05 am | Permalink

    Hi.

    I would like to try your book­marklet, but either I am doing some­thing wrong or the above book­marklet “Font­Friend” is just linked to http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
    If I click on the saved book­marklet, it shows me the con­tents of the jquery.min.js and noth­ing else.
    Can you help?
    Thanks!

  3. Posted May 31, 2009 at 11:17 am | Permalink

    @Steven It works just fine on my end. Which brows­er are you using?

  4. Fred
    Posted June 12, 2009 at 2:48 am | Permalink

    Excel­lent work, thank you. I had just prob­lem on web­sites where is set height to unordered list li, because it is not set in book­marklet. Some­thin like this #font-friend li {height:1.5em !impor­tant;} should solve problem.

  5. Posted June 13, 2009 at 1:06 pm | Permalink

    Hi Fred. Right you are, had­n’t con­sid­ered that use-case. I’ll throw that in in a future update. I have a cou­ple of fea­tures I want to add, so I’ll do it when I get around to that.

  6. Posted August 18, 2009 at 9:45 am | Permalink

    Excel­lent stuff Matt- a nicer inter­face than fid­dling in fire­bug… One ques­tion- did you decide not to include line-height/­font-size con­trols for any rea­son? Thanks!

  7. Matt
    Posted August 19, 2009 at 11:54 pm | Permalink

    @Joshua Cheers, glad you find it help­ful. As to the omis­sion of line-height and font-size, they sim­ply weren’t high pri­or­i­ty to me when I first devel­oped it, and I haven’t found the time or ambi­tion to add them so far.

  8. Tom
    Posted September 3, 2009 at 10:11 am | Permalink

    I’m sure it’s me but I can’t seem to drag the Font­Friend but­ton up to the book­marks tool­bar in I.E. 8 ath­hough it works per­fect­ly in Fire­fox of course. Great app btw!

  9. Matt
    Posted September 3, 2009 at 11:37 pm | Permalink

    @Tom Thanks Tom. You might need to right click and fig­ure out some type of way to add it to the favorites tool­bar. But as I say on the project page, IE sup­port for Font­Friend isn’t some­thing that occu­pies my atten­tion too much.

  10. Posted November 23, 2009 at 7:25 pm | Permalink

    Very clever idea. Thanks Matt.

  11. Matt
    Posted November 24, 2009 at 9:06 am | Permalink

    @Christo­pher cheers, hope it’s use­ful for you.