OK this is off the beaten track, but I’ve been trying to get one of our websites free from the Georgia/Verdana death grip through using CSS @font-face
and Typotheque web fonts. I had some problems getting a CSS @font-face
formatted text to look right in Firefox because it first loads in the fallback font; this is a Firefox issue that’s well documented, and I’m comfortable with how Safari and IE are loading the page. Since there are a lot of images on the page, it can take a few seconds before the text “jumps” into the right typeface. None of these tricks really improved the situation, so I decided to hide the content until the page loaded. Here is the code I’d used.
(all the examples assume that you're loading the jQuery javascript library)
$(document).ready(function(){
$("body").hide();
$(window).load(function(){
$("body").fadeIn();
});
});
Since the body was hidden while other scripts were running, though, other elements of the page broke (specifically a jQuery plugin and a YUI component). This wasn’t ideal either because the browser screen had to go blank between every page for every visitor. This code affects all visitors to the site when I’m really only worried about the 30% who use Firefox. So I came up with this solution which only affects Firefox users and which doesn’t hide the body elements (so that nothing breaks):
$(document).ready(function(){
$("body").css("-moz-opacity","0"); //this css is only used by Mozilla browsers like Firefox
$(window).load(function(){
$("body").css("-moz-opacity","1");
});
});
It doesn’t seem to be working when I use this “-moz-opacity” style in a “loading” CSS class (and then use $("body").addClass("loading")
and $("body").removeClass("loading")
to change the styling). Perhaps this is because Mozilla has deprecated this style. I also don’t like reading that Gecko 1.9.1/ Firefox 3.5 and later do not support -moz-opacity. By now, you should be using simply opacity.
However, it seems to be working when jQuery applies this style with css. Just to make sure this trick works in the future, I’ll instead use the css opacity style after doing a jQuery browser detect:
In the stylesheet:
.loading{opacity:0;}
In the javascript:
if($.browser.mozilla){
$("body").addClass("loading");
$(window).load(function() {
$("body").removeClass("loading",500);//I'm using the jQuery UI animation here to fade content in, omit the ",500" if you aren't loading jqueryui.1.7.2.js.
});
};
Ah. This appears to be working and only will affect the Firefox users with the screen going blank. But once the fonts are formatted, the body will gracefully fade in. Your thoughts or suggestions are appreciated!