I’ve been inspired by a few different articles to experiment with font stacks, but I wanted a way to quickly see how different font families looked within the context of my design right in the browser. For instance, how well does Georgia work as a fallback for Constantia? (Pretty well.) How similar are Helvetica Neue and Helvetica? (The leading is surprisingly very different.)
To this end, I’ve released a bookmarklet that aids in the process of testing out different fonts. You can start using it right now by dragging it to your bookmarks toolbar:
You can start using it immediately, or see the project page for more info.
Please report any feedback, issues or feature requests by commenting on this post, via Twitter, or on the Google Code project page.
11 Comments
i think font family tahoma good enough at least for my web
Hi.
I would like to try your bookmarklet, but either I am doing something wrong or the above bookmarklet “FontFriend” is just linked to http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
If I click on the saved bookmarklet, it shows me the contents of the jquery.min.js and nothing else.
Can you help?
Thanks!
@Steven It works just fine on my end. Which browser are you using?
Excellent work, thank you. I had just problem on websites where is set height to unordered list li, because it is not set in bookmarklet. Somethin like this #font-friend li {height:1.5em !important;} should solve problem.
Hi Fred. Right you are, hadn’t considered that use-case. I’ll throw that in in a future update. I have a couple of features I want to add, so I’ll do it when I get around to that.
Excellent stuff Matt- a nicer interface than fiddling in firebug… One question- did you decide not to include line-height/font-size controls for any reason? Thanks!
@Joshua Cheers, glad you find it helpful. As to the omission of line-height and font-size, they simply weren’t high priority to me when I first developed it, and I haven’t found the time or ambition to add them so far.
I’m sure it’s me but I can’t seem to drag the FontFriend button up to the bookmarks toolbar in I.E. 8 athhough it works perfectly in Firefox of course. Great app btw!
@Tom Thanks Tom. You might need to right click and figure out some type of way to add it to the favorites toolbar. But as I say on the project page, IE support for FontFriend isn’t something that occupies my attention too much.
Very clever idea. Thanks Matt.
@Christopher cheers, hope it’s useful for you.