cross-browser “bullet-proof” CSS3 @font-face syntax

Question

I have seen many attempts at a cross-browser @font-face syntax including the:

• Bulletproof @font-face syntax (specifically the smiley variation)
• Mo’ Bulletproofer @Font-Face CSS Syntax
• The New Bulletproof @Font-Face Syntax
• ...and a few others.

Which one is best? Which one has the best browser support?
I'm not worrying about IE 5 support, :) but I don't want a browser to have to download multiple versions of the same font.

Thanks guys!

Answer 1

The New Bulletproof @Font-Face Syntax is the latest iteration, so your best bet is to use that one.

If you’re interested in the different syntaxes and how they came to be (and why all those weird hacks are needed), I’d suggest watching Jake Archibald’s #fronteers11 presentation. Slides are here.