Checking @font-face support with Modernizr

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.
With Modernizr you can detect the browser's @font-face support and offer a fallback solution (image replacement, sIFR, Cufon, ...). Here is code example:

@font-face {
  font-family: MyWebLicensedFont;
  src: url(/fonts/my_web_licensed_font.eot);
  src: local('My Web Font'), 
         url(/fonts/my_web_licensed_font.ttf) format("truetype");
}
.fontface #heading h1 {
  font: 16px/24px MyWebLicensedFont, Helvetica, sans-serif;
}
.no-fontface #heading h1 {/*
  Specify a background image as a fallback or prepare rules for sIFR/Cufon.
*/}

Even if you just use the regular fallback fonts from the user's OS, using Modernizr can be very helpful to have better control over the results. For example, if you use a very condensed webfont, fallback fonts such as Arial or Verdana might break your layout. With Mondernizr you can control the size of the linked webfont and the fallback fonts individually.

Links