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. Well… you don’t. We noticed you are using Internet Explorer. Unfortunately, this tool doesn’t work in IE at this time.
2. If you have Firefox or Chrome installed, please visit this page in either of those browsers and follow the instructions.
3. If you don’t have either of those browsers installed, we strongly encourage you to download Chrome or Firefox now!

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, FFFFALLBACKclones 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.

Questions, comments & feedback · Fork it on Github Handcrafted by @jbrewer and @shinypb, with love, in San Francisco.

Extra big high-fives to the kind souls whose encouragement brought this to life: Trent Walton, Tim Brown, Kyle Sollenberger, Yaron Schoen and Mandy Brown.

Tell the world about FFFFALLBACK!

via ffffallback.com