@font-face

Allows the use of online fonts. For examples please see the headlines (e.g. the orange ones) at css3files.com. They are all done using @font-face.

Compatibility

@font-face Firefox 3.6+ Safari 5+, Chrome 10+ Internet Exlorer 9+ Opera 11+ iOS 4.2+ Android 2.2+ Blackberry 7+ IE Mobile 10+

Not supported by Opera Mini. For detailed compatibility info see caniuse.com.

Firefox 4+Safari 5+, Chrome 10+Internet Explorer 9+Opera 11+
iOS 4.2+Android 2.2+Blackberry 7+IE Mobile 10+

General description

@font-face {
font-family: 1″FontName”;
src: 2url(‘fontfile.eot’);
src: 3url(‘fontfile.eot?iefix’) format(‘eot’),
4url(‘fontfile.svg#FontName’) format(‘svg’),
5url(‘fontfile.ttf’) format(‘truetype’),
6url(‘fontfile.woff’) format(‘woff’);
}

  1. The name of the font for the further usage in the stylesheet at the font-family property. If the font should be assigned to all <h2> headlines for example you have to write <h2> { font-family: “FontName”, sans-serif }. Can be choosen freely.
  2. Optional. The eot fontfile. Can be omitted if you don`t want to support Internet Explorer prior to version 9 (including semicolon).
  3. Optional. Can also be omitted for Internet Explorer < 9. ?iefix prevents IE6 from interpreting all of the following. If the whole IE family (6 to 9) should be supported, 2 and 3 are needed.
  4. Optional. Can be omitted if iPad versions prior to iOS 4.2 shouldnt be supported. FontName is the same as at 1.
  5. The ttf fontfile. Necessary to support (Mobile) Safari and Opera.
  6. The woff fontfile for all modern browsers (best choice).

Further reading

For more info see the W3C site, the Safari site, the MSDN site and the site at MDN (including compatibility info for older browser versions). Based on the further hardening of the bulletproof syntax by Fontspring.