Skip to: content, navigation

@font-face

Spec
Version
CSS2, 3
Browser support (more…)
IE5.5+ FF3.5+ SA3.1+ OP10+ CH2
Partial Full Partial Full None

Syntax

@font-face {
font descriptors
}

Description

The @font-face at-rule allows you to define custom fonts. It was first defined in the CSS2 specification, but was removed from CSS2.1. Currently, it’s a draft recommendation for CSS3. The at-rule contains one or more property declarations, like those in a regular CSS rule set, which are called font descriptors. You can specify up to 24 different properties, but it’s beyond the scope of this reference to explain them all—you can read about them at the W3C Web Fonts page.

The font descriptors allow you to define fonts, and to influence the browser’s selection of fonts when no matching font is found on the client system. This matching can be performed not only on the font name, but on many other font characteristics as well.

In the simplest usage scenario, @font-face allows you to specify a font-family name, and the URI to a source file for the font, which can be downloaded by the user agent if needed. You can then use the font-family name in other font-family declarations where required.

Example

This at-rule declares the font family called Example Font, which is used in the statement that follows:

@font-face {
  font-family: "Example Font";
  src: url("http://www.example.com
  ➥    /fonts/example");
}
h1 {
  font-family: "Example Font",
  ➥    sans-serif;
}
Note: Copyright Issues

Make sure you check the license of the font you wish to use, as most fonts are not licensed to allow this kind of use. Making the font available on your server violates most end user licensing agreements.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Partial Partial Partial Partial None None None None Full None None Partial Partial None None Full None

Internet Explorer versions 5.5 and later offer a partial implementation for the browser’s WEFT (Web Embedding Fonts Tool) technology, but this only works with EOT (Embedded OpenType Font) files.

Safari version 3.1 and later, Firefox version 3.5 and later, and Opera version 10.0 and later support TrueType/OpenType TT fonts and OpenType PS fonts.

Previous / Next page

  1. Previous
  2. Next

Related reference material

User-contributed notes

ID:
#5
Contributed:
by MesmerLab
Date:
Fri, 08 Jan 2010 18:56:34 GMT

This article needs to be updated with current browsers.

Also, would this be the right place to talk about possible copyright infringement issues associated with distribution of the fonts?

ID:
#3
Contributed:
by armchaircritic
Date:
Wed, 18 Feb 2009 15:38:06 GMT

Opera 10 alpha build supports @font-face, and most likely will be supported in the final release of Opera 10 [scheduled for release sometime in 2009]

ID:
#2
Contributed:
by Kevin Yank
Date:
Tue, 29 Jul 2008 05:50:42 GMT

Safari 3.1 has added support for linking to TrueType fonts as per this announcement:

http://webkit.org/blog/124/downloadable-fonts/

Be aware that most font licenses prohibit the distribution of TrueType font files on the Web, so for most commercial fonts (including the fonts provided with your operating system), you would be breaking the terms of the software license that you agreed to by using this feature.

A small selection of “free” fonts are available at various sites on the web. Some of these are available under licenses that allow this kind of font linking.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

Search