Jonathan Miles, Freelance Web Designer

Recently I was working on a website and using the rather natty Cufon (a clever bit of JavaScript) to do some font replacement. Or at least that was my intention – for some reason it was ignoring the font colour I’d set in my stylesheet…

Always add stylesheets before scripts

The problem was that I’d inadvertently linked my stylesheet into the page after the Cufon script, whereas styling should come before scripts. This is covered in Cufon’s styling documentation – by linking stylesheets into the page first you’re guaranteeing they’ll load before Cufon tries to replace any text. Do it the wrong way around and your style rules won’t necessarily be available by the time Cufon tries to work its magic.

This also explains why the problem was intermittent – in some cases the stylesheet must have been cached, which side-stepped the timing problems.

It’s good practice in general to link external stylesheets before external JavaScript files, as it can help your web pages to load faster. This is because web browsers won’t download subsequent resources once they find a script to download – scripts are capable of modifying the page, so the browser needs to download them fully before continuing. By putting other resources before the scripts they’ll be started first and will download in parallel (there’s a limit to how many files can download in parallel, but it’s nevertheless worth taking advantage of parallelism).