There has been a lot of talk recently about web fonts and the possibilities opened up to web designers by the @font-face CSS rule. The ability to set web type in fonts other than Georgia, Arial or Verdana will allow designers to be more creative and original with their work.

As always there are some problems to overcome, specifically with cross browser implementation. Internet Explorer has supported embedding fonts in Microsoft’s proprietry ((Although not for long.)) .eot format for years, but does not support the .ttf or .otf formats. Firefox, Safari amd Opera have recently added support for .ttf and .otf format fonts, but do not support .eot. Here is a handy table showing what is supported where.

To get around these limitations, we can simply serve the font file in both .eot format (for IE) and .ttf/.otf format (for Firefox, Safari and Opera 10).

Microsoft provides a Windows only tool called WEFT to convert .ttf files to .eot. It might just be the worst software I have ever used, but the end result is a .eot version of your .ttf font. We can now embed this font in both formats as follows (In this case I am using the freely available font Stalker 2 ((Font licensing for web embedding is a whole other story which I will not get into.)) ):

@font-face { /* For IE */
   font-family: Stalker;
   src: url(STALKER0.eot);
}

@font-face { /* For Safari, Firefox, Opera */
   font-family: Stalker;
   src: url(stalker2.ttf) /* This could also be a .otf font */
   format("truetype");
}

As long as we specify the .eot font before the .ttf (or .otf) font, Internet explorer will read the .eot file and Safari, Firefox and Opera will read the .ttf file. We can now call the font in the same way we would any other:

h1 {
	font-family:Stalker;
}

I have not shown it here, but it is probably best to specify fall back fonts for users on older versions of Firefox, Safari and Opera.

This solution is tested in IE6, IE7, IE8, Safari 4 and Firefox 3.5.