The @font-face CSS tag allows web designers and developers to specify custom fonts to display text on their web pages. Allowing websites to utilize custom fonts removes the burden of requiring your website visitors to have the custom fonts installed on their personal computer. The following examples use the DejaVu Sans font, which is freely available for download here.

Generic Syntax

• a-remote-font-name: The name of the font to be used as the font-family value.
• source: The URL or relative path to the font file stored on the server.
• format: A font format hint to aid the browser with determining the type of font. Possible values include truetype, opentype, truetype-aat, embedded-opentype, and svg.
• weight: A font-weight value (i.e. strong, 100, 200, etc.).
• style: A font-style value (i.e. italic).

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [<format>][,<source> [<format>]]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

Cross-Browser Caveats

As pointed out in the comments section by Hammil, there are a couple of caveats to getting your declarations fully functional in IE due to lack of TTF and OTF font support. Beyond that, IE’s @font-face parser is screwy and attempts to read subsequent rules which should only apply to other browsers. For the sake of brevity, I will link to Paul Irish’s post Bulletproof @font-face syntax for a more in-depth view at why you need yet another IE workaround CSS solution. The version below has been updated for cross-browser correctness utilizing the “Smiley Variation” hack.

Please consider using the FontSquirrel generator as it auto generates IE compatible EOT files and takes all of the pain out of generating your own @font-face rules.

Example with Bold & Italic Support

/* normal case */
@font-face {
    font-family: "DejaVu Sans";
    src: url('path-to-font-directory/DejaVuSans.eot');
    src: local('☺'), url("path-to-font-directory/DejaVuSans.ttf") format("truetype");
}
/* bold */
@font-face {
    font-family: "DejaVu Sans";
    src: url('path-to-font-directory/DejaVuSans-Bold.eot');
    src: local('☺'), url("path-to-font-directory/DejaVuSans-Bold.ttf") format("truetype");
    font-weight: bold;
}
/* italic (oblique) */
@font-face {
    font-family: "DejaVu Sans";
    src: url('path-to-font-directory/DejaVuSans-Oblique.eot');
    src: local('☺'), url("path-to-font-directory/DejaVuSans-Oblique.ttf") format("truetype");
    font-style: italic, oblique;
}
/* bold and italic (oblique) */
@font-face {
    font-family: "DejaVu Sans";
        src: url('path-to-font-directory/DejaVuSans-BoldOblique.eot');
    src: local('☺'), url("path-to-font-directory/DejaVuSans-BoldOblique.ttf") format("truetype");
    font-weight: bold;
    font-style: italic, oblique;
}

Example without Bold & Italic Support

@font-face {
    font-family: "DejaVu Sans";
    src: url('path-to-font-directory/DejaVuSans.eot');
    src: local('☺'), url("path-to-font-directory/DejaVuSans.ttf") format("truetype");
}

Usage

Once you’ve added @font-face to your CSS file, you can freely reference the font to your hearts content. Here’s a quick example:

h3 { font: bold 18px/24px "DejaVu Sans"; }

Browser and Font Format Support

• Webkit/Safari 3.1+ – Support for TrueType/OpenType TT (.ttf), OpenType PS (.otf), SafariMobile (.svg)
• Opera 10+ – TrueType/OpenType TT (.ttf), OpenType PS (.otf), SVG (.svg)
• Opera Mobile 9.7+ – TrueType/OpenType TT (.ttf), OpenType PS (.otf), SVG (.svg)
• Internet Explorer 4+ – Embedded OpenType (.eot) created with Microsoft WEFT Tool.
• Mozilla/Firefox 3.5 – TrueType/OpenType TT (.ttf), OpenType PS (.otf)
• Mozilla/Firefox 3.6 – TrueType/OpenType TT (.ttf), OpenType PS (.otf), WOFF
• Google Chrome 4.0+ – TrueType/OpenType TT (.ttf), OpenType PS (.otf). Disabled for security review.

Full specifications of the CSS3 @font-face tag can be found at w3.org, including using different platform versions of fonts for more cross-browser compatibility.