I’m working on our company’s site and we;re using typekit to deal with @font-face and font licensing. I was chugging along yesterday, all giddy over the ability to use type other then the usual suspects.
This morning I made the mistake of opening the site in Firefox and discovered the ugly truth about this browser. I’ve been developing the site mostly in Safari, with the occasional peek in FIrefox to ensure things are working as expected. There were a couple minor issues until now.
Firefox apparently decides to output the content with a fallback font THEN decide if any fonts are applied using CSS and re-render the content with the “new” type face. Safari and IE both work properly as they assume the designer knew what they were doing when they decided to select a different font to display the site with instead of a standard web font.
Typekit has a work around class that gets appended to the html tag. By generating some styles that begin with .wf-loading and setting visibility to hidden you can apply the class to individual elements on the page or globally to id’s. Since I’m using FF Meta and FF Meta SC on all the content I applied the class globally to some major content block id’s
It works but there’s a problem. The page doesn’t load these blocks for ALL browsers, not just Firefox and it’s ridiculous to fix a problem for one browser only to harm the way it works for every other browser that wants to do the right thing. So, I started researching the use of conditional javascript to get firefox to render the style but all other browsers won’t do anything differently. My code looks like this:
<!-- append .wf-loading typekit for for Firefox browsers only using jQuery -->
[removed]
$(document).ready(function(){
if($.browser.mozilla) {
$("head").append(
$("<style> .wf-loading #main_nav, .wf-loading #content, .wf-loading #featured_slideshow, .wf-loading #galleriffic_slideshow { visibility: hidden; } </style>")
);
}
});
[removed]I have jQuery loading just above this script. It works, some of the time. This leaves me with a couple questions. Is there a better way to do this (too bad Firefox doesn’t understand conditional comments)? Is Firefox rendering the javascript too late in the process to force the style to render when the page loads? Why can’t my boss just live with the FOUT and the fact that Firefox sucks as it has become a victim of its own hubris? Why can’t webkit just be used by every browser on the planet and save web developers from all the annoying differences in the way browsers render HTML, CSS and JavaScript?