The @font-face Rule

The @font-face rule allows custom fonts to be loaded into a webpage.

With the help of this rule, designs are no longer limited to the fonts that are installed on a user's computer.

In Internet Explorer 8 and earlier , the URL must point to an Embedded OnpenType (eot) file, while Firefox, Chorme, etc. support True Type Fonts (ttf) fonts and OpenType Fonts (otf).

In the @font-face rule, you must first define a name for the font (e.g., myFirstFont), and then point to the font file.

Using the @font-face Rule

Each form of the font family myst be declared using the @font-face rule. In the example below, a custom font called "Delicious" is loaded and used for the heading.

The HTML:


		<h1>This is Our Headline</h1>

The CSS:


		@font-face {
			font-family: Delicious;
			src: url('Delicious-Roman.otf');
		}
		@font-face {
			font-family: Delicious;
			font-weight: bold;
			src: url('Delicious-Bold');
		}
		h1 {
			font-family: Delicious, sans-serif;
		}

Internet Explorer has a built-in bug when multiple @font-face rules are defined. Using #iefix as shown below fixes the problems:


		@font-face {
			font-family: Delicious;
			src: url('Delicious-Roman.ttf');
			src: url('Delicious-Roman.eot?#iefix');
		}

Result:

This is Our Headline

The question mark fools IE into htinking the rest of the string is a query string and loads just the EOT file. The other browser follow the spec and select the format they need, based on the src cascade.