So I work on a website called Performance.gov. It’s a tracking site for government agencies and the effectiveness of the programs they employ. I don’t have any insight or ability to change any of the data or content on the website, so don’t write me about that, but I do develop the front end. We recently rolled out a new menu system that uses the downloadable font “Helvetica Neue Condensed Bold” for the menu’s main font. It’s very clear, very bold and makes a great menu font. We use WebFonts.fonts.com and it’s completely licensed. They run a great service so check them out. The project is drupal 6 based but we forgo their interface to do a simple CSS include at the top of the page. The problem we ran into after the menu was rolled out… Government computers are configured with a security level in Internet Explorer that prohibits font downloading and doesn’t allow the user to change it. Why would they do that? No idea. I don’t know the network administrators, but if I had to guess it would be out of ignorance about downloadable fonts, they would rather disallow it rather than allow it and have it become a security threat. Whatever the reason, i’m not going to change their security settings. So i’m faced with the problem that the substitute font makes several parts of the menu lay out incorrectly. We thoroughly tested the code before it went out the door, but what we didn’t test was a computer system that disallows downloadable fonts. It simply wasn’t on the radar. In the process, I cam across a genius jQuery Plugin that allows you to test for alternate fonts. The plugin allows you to specify fonts via jQuery call, which I don’t like, but the “test font” method was particularly interesting.
testFont: function(requested_font,baseline_font) {
var span = $('<span id="font_tester" style="font-family:'
+ baseline_font +
'; font-size:144px;position:absolute;left:-10000px;top:'+
'-10000px;visibility:hidden;">mmmmmmmmmmmmmmmmmmmmmmmmmm'+
'mmmmmmmmmmmmmmmmml</span>');
$("body").prepend(span);
var baseline_width = span.width();
span.css("font-family", requested_font + "," + baseline_font );
var requested_width = span.width(); span.remove();
// If the dimensions change, the font is installed return (requested_width != baseline_width);
}
What it does is create a div offstage and give it a default font which you specify, grab the width, give it the control font in question and if the width changes, it’s assumed the font has downloaded. Completely brilliant. I combined it with a body-level class and specified css classes for the hobbled copies of IE:
if (! $.fontunstack.testFont("Helvetica W01 Bd Cn", "Arial")){
$("body").addClass("perfmenu-nofonts");
}
Now I can create an alternate width that will be big enough for the default font and prepend that style with body.perfmenu-nofonts Pushing it to production in the next 24 hours.