Web applications for a Government Audience: Think twice before using Font Icons

Modern web applications make heavy use of icons and beautiful custom text fonts, and for good reason. Icons and custom fonts are awesome when used properly. But what happens when icons and custom text do not appear for a significant portion of users?

Icons

Take the following example from Data.gov. They have a very nice looking navigation on their homepage that makes great use of font icons.

However, this is how the site looks using Internet Explorer 11 on a government domain such as DOD.

On one hand, the icons are only used as supplements and so even though there is a gaping vertical space between each navigation item, usability is still the same. If you follow this principal and always provide text next every icon, worrying about IE users on government domains is not a high priority. There is also a very minor difference in the text fonts although, it's very subtle.

Here is another example where the lack of icons causes a greater impact.

You can see that all the social icons in the upper right corner are missing and there is a text overflow issue that occurred because their custom text font significantly condensed the heading.

So what if our primary use of icons is to eliminate extra text. How do we solve the problem? There is a 100% proven solution. However, you are not going to like it. The solution is to use sprite sheets with image icons. This whole issue stems from a security setting in IE that can also be set from a Windows group policy, a policy that almost all government administrators enable.

The following image illustrates the setting.

Disabling font downloads will block the fonts and as of yet, I have not found a way around this. I tried the following workarounds with no success.

Used a multitude of @font face declarations
Hosted the fonts locally
Hosted the fonts from official CDNs
Used Font Squirrel to Base64 all fonts and embedded them directly into the CSS files

These failures have pushed me to rely on image sprites to ensure that all users receive the same visual interface. There are many online sprite generators such as SpriteGen, CSSsprites, and this neat responsive sprite generator that leverages the CSS background-size property. Personally, I prefer the excellent sprite generation support of Compass using SCSS. To explore this option, check out this article that works through the general process.

Custom Text Fonts

Ahh, our beautiful custom typography. Open Sans, Roboto, and Raleway are 3 great fonts that spring to mind. But what happens when they are blocked for IE users behind government firewalls? Well, the good news that nothing much actually happens. If you declared any fallbacks in your @font-face declaration the browser will try to load them, while at worst case falling back to a basic sans-serif or serif.

The biggest difference tends to occur with the thinner font weights and text that is constrained by a container. For example, text in a tile heading or navigation menu can wrap and overflow when a basic font is loaded that is bolder and wider.

But one should not despair. Windows 7 (and Windows 10) have a healthy set of fonts installed with the OS. Using any of these fonts is a safe bet that they will downloaded through the browser when set as a fallback. A list of all Windows 7 fonts can be found here.

The following image shows the fallbacks that I am currently using on an app where a significant audience will be browsing on IE 11 behind a government firewall.