Embedding Fonts Using @font-face

History

The @font-face property was originally included in the original CSS 2 spec. It was the removed in CSS 2.1 and is now making an encore appearance in CSS 3. Browsers have begun to preemptively implement CSS3 and for over a year now, all major browers offer a method to embed fonts in webpages.

Compatibility

Ironically, IE has been supporting embedded fonts since IE 6 (albeit in eot format). Safari was next on board at the end of ’08 followed by Firefox and Safari in mid ’09 with Chrome bringing up the rear at the beginning of ’10.

Browser	IE	Firefox	Safari	Opera	Chrome
Version	6	3.5	3.2	10	4.0.249.78
Release Date (mm/yy)	08/01	06/09	11/08	06/09	01/10
Format Support	EOT	TTF/OTF	TTF/OTF	TTF/OTF	TTF/OTF

The @font-family Rule

The at @font-family rule only has two required properties: font-family and source.

Font-family is the desired name to refer to the font. This can be any name desired by the designer, but for the sake of consistency, it’s best to use the generic name of the font. For example, when embedding Century Gothic into a page, it is recommended to use the name “Century Gothic”. Names are case-sensitive.

Source is the relative or absolute location of the font file in the file system. Simple enough.

Implementation

As with all CSS tricks, IE is the crux. To work in IE, all fonts must be embedded as EOT, a non-standard format that is the only supported format for IE. Unfortunately, IE is also the only browser that supports EOTs; Firefox, Chrome, Safari and Opera will fail. To rectify this, we will use the non-IE browsers capability for failed rule passover.

I’ll be using the font Century Gothic for this explanation. The font should be installed on most machines with the following variants.

• Century Gothic (Regular): GOTHICC.TTF (I’ve renamed to gothic-c.ttf)
• Century Gothic (Bold): GOTHICB.TTF (I’ve renamed to gothic-b.ttf)
• Century Gothic (Italic): GOTHICI.TTF (I’ve renamed to gothic-i.ttf)
• Century Gothic (Bold Italic): GOTHICBI.TTF (I’ve renamed to gothic-bi.ttf)

Step 1: Prepare the Font Files

Create an EOT of your TTF/OTF file. You can use the online TTF 2 EOT converter. Copy the TTF and EOT version of the font to someplace in the website’s file tree.

Step 2: Create the IE Rule

@font-family {
  font-family: "Century Gothic";
  src: url("resources/fonts/gothic-c.eot");
}

Step 3: Create the Non-IE Rule

@font-family {
  font-family: "Century Gothic";
  src: url("resources/fonts/gothic-c.ttf") format("truetype");
}

Step 4: Order the Rules

When entering the rules into your CSS document, make sure to enter the IE rule first, then the Non-IE rule. This is very important. If the rules are not inserted in the proper order, they will fail.

@font-family { /* IE Rule */
  font-family: "Century Gothic";
  src: url("resources/fonts/gothic-c.eot");
}

@font-family { /* non-IE rule */
  font-family: "Century Gothic";
  src: url("resources/fonts/gothic-c.ttf") format("truetype");
}

Step 5: Add Rules for Font Variants

For font variants, simply replicate the rule (keeping the name the same) and modify the font-weight and font-style properties. Keep in mind that you’ll need the appropriate files for the bold and/or italic versions of the font.

/* ******* Century Gothic (Regular) ***** */

@font-family { /* IE Rule */
  font-family: "Century Gothic";
  src: url("resources/fonts/gothic-c.eot");
}

@font-family { /* non-IE rule */
  font-family: "Century Gothic";
  src: url("resources/fonts/gothic-c.ttf") format("truetype");
}

/* ******* Century Gothic (Bold) ***** */

@font-family { /* IE Rule */
  font-family: "Century Gothic";
  src: url("resources/fonts/gothic-b.eot");
  font-weight: bold;
}

@font-family { /* non-IE rule */
  font-family: "Century Gothic";
  src: url("resources/fonts/gothic-b.ttf") format("truetype");
  font-weight: bold;
}

/* ******* Century Gothic (Italic) ***** */

@font-family { /* IE Rule */
  font-family: "Century Gothic";
  src: url("resources/fonts/gothic-i.eot");
  font-style: italic;
}

@font-family { /* non-IE rule */
  font-family: "Century Gothic";
  src: url("resources/fonts/gothic-i.ttf") format("truetype");
  font-style: italic;
}

/* ******* Century Gothic (Bold-Italic) ***** */

@font-family { /* IE rule */
  font-family: "Century Gothic";
  src: url("resources/fonts/gothic-bi.eot");
  font-weight: bold;
  font-style: italic;
}

@font-family { /* non-IE rule /*
  font-family: "Century Gothic";
  src: url("resources/fonts/gothic-bi.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

Usage

To use the font, simply invoke the name under font-family property for the appropriate rule.

h1 {
  font-family: "Century Gothic", Arial, Helvetica;
  font-weight: bold;
}

Things to Consider

A few tidbits to keep in mind when working with embedded fonts.

• For font variants (bold, italic, etc) you’ll need a different font file for that specific variant. For example, Copperplate Gothic is gothic-c.ttf but Copperplate Gothic (Bold) is gothic-b.ttf.
• The order of rules is important. For any given variant, make sure you enter the IE rule first, then the Non-IE rule. The order with respect to the font variant is not important.
• Do not enter a format for the IE rule. Entering format(“opentype”) will break IE support.
• For the Non-IE rule, adjust the format to the respective font format
  • format(“truetype”)
  • format(“opentype”)
• If you leave out the format for the Non-IE rule, the font will still work, but it’s bad practice.
• If your font-name has spaces in it, wrap it in quotes. Otherwise it can be left without quotes
  • font-family: Verdana;
  • font-family: “Century Gothic”;