I love new web technology. I love shiny new elements, api’s and css styles. I anxiously wait for them to reach enough browser support so that I can use them on client work.

Nevertheless, even when a web technology seems to have reached maturity, I frequently seem to run into gotchas. HTML5 video and audio for example are ripe with these. Even when I try to avoid them by using a great third party service like Vimeo, you still run into issues with certain old Android browsers.

Take icon fonts for example. I love icon fonts and IcoMoon is an amazing web app that lets you create your own. Everyone seems to be using them. They even work in old IE. So you’d think it would be safe to use them across the board. GOTCHA!

Icon fonts require @font-face support of course, and there’s still a few browsers that lack that feature. I still want to use icon fonts though! They work great delivering crisp single color icons that have a small filesize footprint. So, I went ahead and quickly made a simple iconfont fallback polyfill using Modernizr to test for @font-face support. I asked a developer I work with to check it out on his phone which was still running Android 2.1. GOTCHA! Modernizr gave a false positive for his phone.

So, instead of using Modernizr, I went with Paul Irish’s previous @font-face detection solution and that did the trick. I’ve posted this little project on Github. I guess could call it Make IconFonts Work On Tim Svensen’s Phone.js, but I just went with iconfont-fallback.