Occasionally, I’ll be reading a website and just wish I could use another, better font. I can, of course… I can go look up the element on the page that I want to change, use the developer tools to dynamically alter the page, and go back to my reading. This is a pain in the neck, though, and sometimes I want to use fonts that I don’t necessarily have on my computer – like “Athelas,” the font that Readability uses to display its body text, and which they get using Typekit.

Moreover, I realized that lots of people have the same issue, and lots of people might want to change the fonts on their page easily. So, I created this bookmarklet generator to do the trick for you. (A little later this week, I’ll be putting up a similar generator that doesn’t use Typekit, since you might be perfectly happy with the fonts on your own computer.)

From the permanent project landing page:

To generate a Typekitify! bookmarklet, you need to have a Typekit account and create a kit with the fonts you want and the domain(s) you want to use. (If you’re on a free account, you can only point at one website at a time.) Grab the Embed Code snipped from the Kit Editor and copy the part that looks like this:

http://use.typekit.com/[characters].js

While the bookmarklet does not currently support attaching unique styles to different kinds of elements, you can generate multiple bookmarklets to achieve the same effect, and rename them to differentiate them. For example, if you wanted header elements to be in FF Meta Serif and paragraphs to be in Myriad, you might make an FFMetafy! and a Myriadify!.