There are a lot of things I like about what’s around the bend with CSS3, but one of the big ones is @font-face. Traditionally, web developers and designers have had a pretty limited set of tools when typefaces were concerned on the web. A specific set of fonts were recommended because they were the fonts that almost everyone had and almost everyone thus be able to display them. Times New Roman, Arial, Garamond, Comic Sans (shudder) etc etc. all the usual suspects we all know super super well.
Yawwwwn. Luckily, @font-face allows the developer to use any font he wants. It allows a locally stored font format to be displayed through the browser. This opens up the web to an amazing variety of font styles and combinations and allows the web designer more control of the brand and message via typefaces.
My favorite application of @font-face though has to be icon fonts. These are typefaces that have been developed to be an icon suite instead of alphanumeric characters. Each one can have up to 255 different icons creating a wide array of possibilities. My personal favorite thus far is the Font Awesome collection. The great thing about using @font-face is that any css3 effect can be applied to them unlike regular images. Shadows, transforms, size, and color can all be adjusted from within the CSS.
Now, of course since this is CSS3, not every browser is going to support every font file format.
That’s lame, but web developers are used to this by now. On the upside, Every browser from IE6 up to the latest and greatest Chrome supports some kind of @font-face. So if you can get your hands on a .WOFF, .EOT, .TTF/OTF, and .SVG version of a font and you plug them into your @font-face rule, you’ll have every browser supported. At least as far as the typeface goes, if you’re looking to apply more advanced CSS3 techniques to your fonts, the browser’s limitations still apply.
