Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

@font-face

The @font-face property allows you to tell the browser what to do if a font doesn't exist. For example, you can download the font, supply just the properties of a font and let the browser find a font on the user's machine that most closely matches those properties. Alternatively, you can supply these properties and the browser can create a font based on them.

P.S. It doesn’t all work yet.

You can use @font-face in several ways:

  • You can ask the browser to download a font like it downloads a picture
  • Use font name matching. You specify font properties (font-family, font-style, font-variant, font-weight, font-stretch and font-size) in the same way as normal except that you can use a comma-separated list. You can’t use relative values (e.g. smaller or bolder) or the keywords (e.g. large or small)
  • Use intelligent font matching. The browser uses an existing font that is the closest match in appearance to your font. (Note that the metrics might not match exactly). The matching information includes information such as the x-height, the horizontal or vertical stem width, vertical stroke angle, and even the Panose-1 number
  • Use font synthesis. The browser creates a font that is a close match in appearance and that matches the metrics of your font. The information requires accurate width metrics and character-to-glyph substitution and position information if you want to preserve all the layout characteristics of the specified font