Font embedding has long been the holy grail for web designers. Although it was part of the CSS2 specification, it was removed in CSS2.1 only to be re-introduced in CSS3. Internet Explorer has actually supported @font-face since version 5.5 and it has now been implemented by all the major Browser developers. Simply put, @font-face is a CSS rule which downloads a font (from either its host server or from a type service such as Typekit or Google Fonts) to the browser for page rendering. The example below is hosted on Google.

This text is set in Bree Serif from Google

In practice using @font-face is easy, though not without some quirks. Although all the browsers support the specification, there is no standard font format. Embedded OpenType (.eot), TrueType (.ttf), Scalable Vector Graphic (.svg) and Web Open Font Format (.woff) are all in use today.
Internet Explorer (versions differ) supports EOT, TTF, WOFF but not SVG. Firefox supports TTF, WOFF but not EOT or SVG. Opera and Webkit browsers don't support EOT. What this means is that a number of formats need to be generated, allowing the browser to select the appropriate one for use. Font Squirrel has an excellent web font generator which handles the conversion of fonts and the generation of the css code. The example below is used for the decorative fleurons on this site —

@font-face{
font-family: 'PrintersDevilsRegular';
src: url('webfonts/printersdevils-webfont.eot');
src: url('webfonts/printersdevils-webfont.eot?#iefix')format('embedded-opentype'),
url('webfonts/printersdevils-webfont.woff') format('woff'),
url('webfonts/printersdevils-webfont.ttf') format('truetype'),
url('webfonts/printersdevils-webfont.svg#PrintersDevilsRegular') format('svg'); font-weight: normal; font-style: normal;
}

Note the different formats. Each of these font files needs to be uploaded to the host server. The 2nd line is a user defined font name, which can be called on simply by adding the font name to the start of any font stack, eg:

h1{font-family: PrintersDevilsRegular, Arial Helvetica, sans-serif;}

An alternative approach is to use a type hosting service, such as Google Fonts, Typekit or Fontdeck. These host the necessary files, and the site simply links to them. The Google service is free, while Typekit and Fontdeck are commercial, but the availability and quality of their fonts is superior.

Typekit was launched in 2009 and was acquired by Adobe in 2011. This writer reviewed the service shortly after the launch. It is without doubt the best service at present. At the time of writing it hosts 704 professionally designed fonts and their font variants are more extended. Many faces are available in weights from Ultralight to Black, with styles in italics and obliques, condensed and extended. A caveat is that most are designed for print, and simply licensed for use on the web. They also have a large list of Type Foundries onboard, including of course, Adobe itself. The service is fast, users will not notice any delay in font rendering.

If there is a criticism, it relates to their pricing model, which is subscription based. While this is not a problem for corporate users, this authors experience with SME clients is that they are usually unwilling to add ongoing costs to their web presence. Typekit does offer a free service, limited to two fonts, but the site must display the Typekit logo. This may be sufficient for personal users.

Fontdeck was created in 2010, as a collaboration between Clearleft, a British web design company and OmniTi, an American software company. They represent some of the same foundries as Typekit, such as Exljbris, but their type suppliers are independent, for the most part. Fontdeck has a very large display font section, but serifs (102 fonts) and sans-serifs (266) are also well covered. The categories used are inaccurate in places, with some serifs under the sans-serif category.

Some of the typefaces included in both categories would be better described as display faces; Ollivette, for example, is a distressed font based on a typewriter typeface. This might work well as a heading but is totally unsuitable for bodycopy.

Note: An issue with using @font-face is FOUT (flash of unstyled text). This occurs as some browsers (some versions of Firefox, Opera and Internet Explorer) load the page then apply the style. Normal text will load, then flicker as it redraws as the embedded font. More recent browser releases appear to be applying a fix. Webkit browsers such as Chrome and Safari don't have this problem as they keep the text invisible until it is ready to be rendered.

At WebType, Steve Matteson recently extended the Georgia family, and David Berlow has extended the Verdana family, both now offering ten weights, italics and obliques, small caps and alternate numerals. These extensions of the core web fonts would do much to improve typographic colour on the web, however their pricing is high— $560 per annum per family for the hosted service rising to $5600 for self-hosting. This unfortunately takes those fonts out of the hands of most users.

On Windows, particularly those versions prior to Vista, fonts need to be hinted to display well. Hinting effectively means that a new font is drawn for each smaller size (to conform to the screen pixel grid), especially at smaller sizes. Hinted fonts can increase file sizes dramatically and can be compounded by having multiple weights and styles. Georgia, a well hinted font, weighs in at 160k, for example. The italic variant adds another 165k. Using a well hinted font in a number of weights and styles could easily add 1MB to size of a page, slowing page response time considerably. In the long term, hinting and file sizes may not pose a problem, as DirectWrite (Vista and windows 7) and OpenType fonts become more commonplace.

@Font-face embedding on this site

These pages are set in Alegreya, designed by Juan Pablo del Peral (one of the winners at AtypI Letter2 competition). Alegreya is available in 12 styles from Google Fonts and Fontsquirrel. It is well hinted and offers true small caps as can be seen in the opening line on this page. The drawback is that the combined size of these styles is significant ―

The sans-serif alternate stylesheet is set in Ubuntu, again available from Googlefonts and Fontsquirrel. Ubuntu was designed by Dalton Maag as an open source font for the Ubuntu OS. Available in 9 sizes, it too, is well hinted and the resulting filesizes are also quite large.

In summary

The increasing number of freely available fonts for the web is encouraging, however the quality of many of these fonts is questionable. Poor kerning tables means that many are particularly unsuitable for body copy, restricting them to headlines and subheadings. Most are available in one weight only, although a few have bold and italic variants. Most browsers have little or poor support for kerning and lack the sub-pixel positioning (using the red, green & blue sub pixels which combine to make a pixel as we know it) that would make kerning more accurate. See the next section for more information on browser and OS text rendering.

Firefox excels at this (sub-pixel positioning) and
WebKit browsers are a mediocre second ― they support kerning via the buggy, SVG derived property-value pair
"text-rendering: optimizeLegibility"
― Tim Brown, 2012

Update 4/5/12: Google have announced that they are currently working on adding subpixel support to the WebKit rendering tree.

The commercial services offer superior typefaces, many of them well hinted despite being designed for print, but their pricing/licensing model puts them outside the range of many users. There is currently a dearth of well-hinted typefaces designed specifically for the screen.

A significant disadvantage of font-embedding, especially for mobile devices is the bandwidth overhead. On 3G networks and with 4G still a way off the extra bandwidth required to download a few variants of a font can cause long delays in page rendering.