Is @font-face usable now?

Question

I have to use a fancy font in a project but I'd really like to avoid sifr and other ugly alternatives so I'm looking at @font-face.

However, I'm really confused with several blog/sites offering different views on its usability. Is is ready yet? Which browsers support it today?

Thanks

Solution 1

Just about every browser implements it now. The only real catch is that Internet Explorer requires font files in its own OTF format and will not understand TTF format. Many sites that provide fonts for use with @font-face will provide you with both formats and the CSS necessary for them to display in both Internet Explorer and other browsers.

Take a look at http://www.fontsquirrel.com/ for a good example of a free library of fonts that come with pre-made @font-face downloads (both file formats and the relevant CSS.)

Solution 2

Paul Irish has outlined the current state of @font-face. Here's a slideshow and a small gathering in Boston reviewing it all:

http://paulirish.com/squeeze/

http://www.ustream.tv/recorded/4828154

The quick answer is 95% of A+ browsers utilize it (FF 3.0 is the exception). Licensing can be tricky, but several tools are of aid, such as FontSquirrel, FontDeck, and FontSpring.

Probably the hardest part of implementation is dealing with Firefox which has a FOUT ("flash of unstyled text") on load, though there are several workarounds, including:

http://paulirish.com/2009/fighting-the-font-face-fout/

http://inspiringpixel.com/articles/web-design/fight-the-fout/240/

http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/