CSS3 Web Fonts Feature

Bid farewell to the web as typographic wasteland. The @font-face CSS rule allows you to embed custom fonts on a web page even if there are no matching fonts on the client system. To use @font-face, you simply include a rule in your style sheet and a reference to the font files. Using @font-face for custom fonts (instead of Cufon, sIFR, or images) ensures all your text is fully searchable, translatable, and accessible. Note that fonts may require a web-font license.
CSS3 Web Fonts
the expressive web

Minimum Browser Support:

92.59%
Percentage of users who can view this feature (source: caniuse.com)

Examples

  • simple as milk

    Makes extensive use of @font-face to create a rich typographical design.

  • Macaroni Bros

    Uses @font-face to avoid having to use pre-rendered images for custom fonts.

Feature Detection

if(Modernizr.fontface){
   //web fonts are supported
}

Learn more about detecting feature support with Modernizr.

Fallback Strategies

The same CSS fallback rules apply when using fonts loaded via @font-face. If the font is not available, then the next specified font will be used.

For example, from the W3C working draft:

@font-face {
   font-family: Gentium;
   src: url('fonts/Gentium.ttf');
}

p { font-family: Gentium, serif; }

If the :“Gentium” font, specified via the @font-face tag is not available, then the user’s default system serif font will be used instead.

FFFFALLBACK is an online tool that helps identify fallback fonts that help your designs degrade gracefully.

Related Adobe Technologies