Test fallback font stacks with FFFFALLBACK

Web fonts are taking off in a big way, but the fact remains that even with the most bulletproof @font-face descriptions, or the use of great services like my personal favorite Typekit, there are going to be situations where those fonts don’t work. It could be the visitor’s browser, it could be your font provider’s CDN doing an Amazon: you need a strong fallback stack.

Unfortunately, testing your fallbacks can be a pain. If you do it manually, it means juggling fonts in your stylesheet stacks which is time-consuming and error-prone. FFFFALLBACK is a great tool that gives you another option. Add the bookmarklet to your bar and you can override the currently visible fonts without editing your code.

As described on FFFFALLBACK’s page, “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.”

My favorite part is that unicorns are involved. But better typography is cool, too.