Vector icons in the form of icon fonts have been around for quite a while, but there are still clients who, for some mysterious reasons, are unable to upgrade their browsers from whatever ancient technologies they use. It most often happens with government agencies, banks, and similar institutions that like to be overly protective of even the most basic things.
Now, I’m not blaming them – any security breach could be a potential disaster. But that’s just it: upgrading to newer browsers actually improves security. Regardless, the requirements are set, and you have to deal with it.
If you’re following latest trends, I’m sure all your icons have already been vectorized, or you’re using one of the many beautiful icon fonts out there. And then your customer drops the bomb on you: “We can’t use them.” Well, don’t start lamenting, and don’t let your product owners get all anxious. Tell them calmly that there’s a solution, and that it would take you maximum of two days to deliver it.
This article is about how to do it.
Problem #1: Disabled Font Download
In the ancient times of internet, about five years ago, web-fonts were a brand new feature. Everyone wanted them, and Microsoft worked hard and dirty to include them in their Internet Explorer. Unfortunately they botched the job, and created an exploitable security hole in the browser. The issue itself was fixed soon after it was revealed, but the damage has already been done. Most government agencies, banks, and other institutions have ordered their IT department to disable this very dangerous “font download hack”, and haven’t bothered to review the order since.
Under normal circumstances, this would mean going back to a bitmap font – and your manager will be tempted to make this short-sighted decision. Don’t let him. At least not in the sense that you’d be undoing all the hard work with changing bitmap icons into fonts. Keep the fonts for those who are up-to-date. For everyone else, let’s introduce an elegant fallback solution.
Step 1: Bitmap Sprite
If you’re using an icon font from one of the renowned resources out there, chances are that you’re also able to export a PNG or GIF format. This should give you a sprite image of your icon subset.
Step 2: Sprite CSS
Again, if you’re using 3rd party sources that can create the sprite image, they would also provide a CSS file with the image. That says a lot about advantage of using a proper icon library, doesn’t it? All you will need to do is modify the CSS slightly, in such a way that you add a “webfont-disabled” CSS class to prefix each bitmap-icon class. This CSS class will be applied to your document BODY (we’ll do that in Step 3). The point of this is, if the font detector script finds out that your client isn’t using web fonts, it would add the “webfont-disabled” class to document BODY, which in turn applies the bitmap-icons’ CSS styling.
body.webfont-disabled .icon-checkmark { ... }
Step 3: Detect Fonts
Finally, to bring this solution to life, we’ll use a wonderful Javascript class written by Patrick Marabeas, called fontSpy. You can find and download it at fontSpy GitHUB. The solution is free and released under MIT License, which (generally speaking) means you can do whatever you want to it.
Download fontSpy and place it in your website’s resources. You’ll want to make sure to include the /styles/ folder and its contents as well; it contains resources vital for proper function of the solution. FontSpy cleverly utilizes the fact that custom font characters may have different widths. It uses this to test whether or not a browser supports webfonts by printing out a character in its own font, and detecting whether the character width matches the custom font, or any of the “default” ones.
Follow the documentation of fontSpy and implement it into your document. By now, you should have something like
<!-- Fallback for disabled font download -->
<script type="text/javascript" src="your_path_to_resources/fontSpy.js" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
fontSpy('myWebFont', {
glyphs: '\ue001',
failure: function() {
$('head').append('<link rel="stylesheet" href="your_path_to_resources/icons-sprite.css"/>');
$('body').addClass('webfont-disabled');
}
});
});
</script>Congratulations, you should be all set to go. As you can see, fontSpy will test for presence of your font. Should the test fail, it will append a reference to the sprite CSS you’ve created in Step 2, and add the “webfont-disabled” CSS class to your document’s BODY. From now on, whenever your clients will say “but we can’t use font icons”, you can smile and reply “we’ve already thought of that”.
