In searching for a solution to embed a particular font in one of my games^[1] at YBCA, I spent dozens of hours experimenting with the @font-face cross-browser^[2] CSS technology. It’s a technique that allows your browser (like MSIE or Firefox, right?) to read a TrueType (.TTF) or OpenType (.OTF) font file from a server and then use it to render type on a web page. The headlines on my blog are rendered using this technology^[3]. I’m really happy with the results.

The idea is to give the designer of the web page the ability to select exactly the font he or she wants to see on the finished page!

But, even with this great tech in place, Microsoft is playing its game of insisting on its own solution—they propose it as a “web standard” but in real life it’s implemented by nobody except Microsoft (using their .EOT file format). So there are two competing and incompatible ways of adding fonts to a web page—the open-source method, and the Microsoft method.

Initially I was able to devise a solution that works except for FireFox (it failed both on Mac OSX and on Windows and Firefox represents about 40% of my users so I really need it to work)… and then, by accident… [Read more…]