…is a CSS method for specifying and embedding online fonts for display purpose. It is both a relatively new and old technology as it is supported in IE 6+ and recently in Safari 3.2+, Firefox 3.5+ and Chrome 4.0.2+ and has been long awaited by developers since its arrival in 1998. Technically it is not actually a font replacement technology but rather a CSS rule, however you can actually replace a font face (such as 'Arial') using this technique.
  • @font-face CSS support
The @font-face CSS rule gives the web designer great flexibility in implementation as it goes hand in hand with standard web font styling. You can apply all the same CSS rules as any other font and even polish your text up with new CSS3 features to animate, rotate, glow, shade – all this without any JavaScript interaction or memory hogging flash/image replacements.
The @font-face used in your headers and even your body text are cached by the browser so downloading them is only necessary the first time a user visits your site. Anti-aliasing is applied when the font you choose is larger (i.e. approximately 12pt in ‘Arial’) and if smaller becomes pixelated to become more readable. Another cool feature is that you can configure this to use a local font first before downloading the remote one. This saves on load times for the user, so if you want ‘Myriad Pro’ to be your default font and you know most people have it but not all then you can rest assured that they will still see the desired font.
Unfortunately @font-face may remain the technology of the futurefor a little while, this time rather amusingly due to the lack of support in versions of Firefox earlier than 3.5. You may find that this isn't so much of an issue when compared with recent browser usage statistics, and thankfully Firefox users seeing the problem will become rapidly less of an issue this time.
Some may also complain about the anti-aliasing methods (or lack of) used across each browser that is dependent on its operating system's rendering engine. I actually prefer the sharper edges and readability that comes with the choice of browser and the faster reactions you get when using JavaScript or just hovering over a link although a designer may want consistent anti-aliasing of text from browser to browser. Perhaps controlling this kind of rendering will become more configurable in the near future [insert CSS3 reference here]?
Another potential agitator is that the web kit fonts that are necessary for modern browsers don't implement the decorative features that come with a font (i.e. bold, italic, underline), so you have to independently define each of these variations somehow.
This last issue may be the biggest snag for some people and others may not care about/understand/take part in this, and that is fonts used under copyright. The reason why this is an issue is that you are technically giving the user the font chosen to be potentially shared amongst many others, so it would be recommended that you check the font being used is an open usage equivalent.
Seeing as @font-face technology is relatively 'new', here are some links to refresh yourself on this technology and integrate it across most platforms.