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

Downloading fonts

The @font-face property allows you tell the browser to download font information like it down loads a picture. This solves the problem of using a font that a user might not have.

The CSS2 specification allows you to use the following font formats:

  • PostScriptä Type 1 (pfb or pfa). Old favourites from Adobe
  • True type (usually a ttf file). Both PCs and MACs use these. We tend to think of them as Microsoft’s fonts but I believe Apple developed them originally
  • Truetype with GX extensions
  • Open type. This is new and should merge the features of PostScript and True Type fonts. A veritable super-font
  • Embedded open type (eot). One of Microsoft’s
  • Speedo
  • Intellifont
  • TrueDocä portable font resource (prf). Courtesy of Netscape and Bitstream

Unfortunately, you can’t use postscript, true type or open true type fonts yet. You need to convert them to embedded open type or True Doc format.

You use the @font-face rule to specify the font that you want to download. For example:

@font-face {src: url(font.pfb)}

You specify the url of the font. You can then use the font anywhere you like in your page. The browser uses the font temporarily and deletes it after the user leaves the page. The font is anti-aliased assuming you turn font smoothing on in the Display option of the Control Panel.

You could add different urls for different fonts. You can even enter a local font:

@font-face {src: local(font.pfb)}