Many of us who have done CSS for a while are aware that an @ symbol can be used to @import one CSS file into another. This was never widely used as it has no significant advantage and it's not fully supported by Internet Explorer. Some of you might be familiar with the @media rule. Mostly used to control print jobs, the @media rule can also be used to target projectors, TV, handheld devices, and more. I wanted to mention those, however what I am most excited about is the ability to finally embed a custom font via CSS3!

Many times through my career I have been faced with the challenge of using custom fonts on the web. As most designers would do, I often created PNGs and treated my font like an image. A friend of mine, Steve Perrie, would at times use flash modules with the font embedded and the text value would match an embed param, which is a nice method with it's own set of pros and cons.

Now with CSS 3 we can finally just use a font that is on the local server! With the at-rule @font-face we can embed fonts and no longer be at the mercy of the users font directory. Here is a an example of using a custom font on a page,

If your browser supports font-face this will display in the Future Wolf font.
This one is called Guwey Scratchy.

Just remember, not all browsers support @font-face. For that, I have found these two charts, one is a list of supporting browsers, the other, the font types the browsers expect.

Font-face Browser Support
Browser Font Type Support