Working for a large publishering group who, among other things, have a large section dedicated to the sale childrens books, we have a lot of websites with really graphically heavy designs.  Specifically the designers will often put in navigation elements using non standard fonts, which they insist must be used as-is leaving us with only a couple of options;

• sIFR
  This is a javascript/flash solution which allows you to use any font you want on a website.  It’s very simple to use- you simply add the javascript include to the top of your page, then add the sIFR css classes to the elements you want to be processed by sIFR.  You will also need to open the attached fla file and change the font in there and republish the SWF file.  At run time, the javascript then finds any elements using these classes, grabs their content, then substitutes it with a small flash SWF file, showing your title in your chosen font. 

  This is best used for page headings rather than large blocks of text (due to the processor time required to perform the conversion in real time) and, in my experience, can lead to some CSS based head aches (adding padding or margins where you dont expect it, or generally pushing other elements around) if you have a particuly tight design.

• CSS Sprites
  

  This solution isn’t as nice as sIFR, as you are still having to create a graphic for every button, and a graphic for every over state etc.  However with Sprites, you dramatically reduce the download times but putting all your button graphics and all their over states in a single image, and adjusting the offset of which part of the image you see on each button, using CSS.  An example sprite with just a single button can be seen in the image on the right.

  The benefits to this include significantly reduced download times as you don’t have a individual set of headers and footers for each of the individual images- you’re just downloading the one graphic.  This also eliminated the need for pre-loaders (which never seem to make much of a difference anyway!) because as soon as the graphic is loaded, you then have all the graphics for your navigation, and their over state’s in memory.

  So for each button on the site you set the same single image file, but when you set the background image, you also set an offset like so;

  #leftNav #btnHome a {
  	background-image:url(/graphics/leftnav_sprite.gif);
  	background-position:0px 0px;
  	}
  	#leftNav #btnHome a:hover {
  	background-position:0px -26px;
  	}
  

We went with the CSS Sprites solution in the end which went in very easily and immidiatly worked under firefox.  We did however see issues under IE6- as we roller over the buttons there seemed to be a lag before they actually redrew the normal images, as though it was downloading the graphic again; which apparently is exactly what was happening.  After a bit of googling around we found this article by Andrew Fledderjohann which had the solution we needed (as well as a few other fixes for apache etc)– a simple addition to the headers supplied by IIS when hosting the site.  In the properties for the site in IIS, add a new Custom HTTP Header called Cache-Control and set the value to

post-check=3600,pre-check=43200

This started working instantly for us totally eliminating the flicker.  You can see the results of this working up on www.franklinwatts.co.uk