FFFFALLBACK

A simple tool for bulletproof web typography.

It's a brave new world. Web fonts are here, sparking an exciting new era in web design. Ffffallback makes it easy to find the perfect fallback fonts, so that your designs degrade gracefully.

So, in the spirit of bulletproof web design, we give you…

ffffallback the bookmarklet!

Okay, so how do I use this thing?*

  1. Drag the bookmarklet to your browser toolbar.
  2. Go to the page you want to test and click the bookmarklet.
  3. The bookmarklet will scan the CSS of the page in order to identify existing web fonts. Then, using magical unicorns and javascript rainbows, FFFFALLBACK clones the page and provides a tool where you can test and analyze different fallback font choices.
    1. You can also toggle open an input in order to change font-size, line-height, color, etc. Remember to use !important, as it’s…well, you know, important.
  4. Bulletproof your font-stacks and rejoice!

* Small caveat: this bookmarklet only works on webkit browsers (Chrome & Safari) or Firefox. We might get it working for IE and Opera if time permits. But I wouldn't hold your breath.

For more background on how this came to be and why it's important, read Type study: Choosing fallback fonts.