The heart of tech

This article was published on April 26, 2011


    Test fallback font stacks with FFFFALLBACK

    Test fallback font stacks with FFFFALLBACK
    Joel Falconer
    Story by

    Joel Falconer

    Joel Falconer is the Features Editor at TNW. He lives on the Gold Coast, Australia with his wife and three kids and can sometimes be found g Joel Falconer is the Features Editor at TNW. He lives on the Gold Coast, Australia with his wife and three kids and can sometimes be found gaming or consulting. Follow Joel on Twitter.

    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.