Custom Fonts in Web Pages

The What

I’m tired of making text into images everytime I want to use a nifty font. Now I’ve heard these tales of being able to embed fonts in webpages, but for a while I figured it was all poppycock. However, after a particularly grueling day at work, I decided to give it another run. I found some code after searching for a few minutes on Google, and then a few minutes later, verified that it totally failed.

Welcome to the world of amateur forums (ie. the internet). Its where people post hacks, cracks, and just about every single way to do something wrong instead of the one the way to do it right and actually get it to work. But I digress.

Now to be honest, the solutions I found did work, except in IE. Unfortunately, only a dunce thinks that everyone in the world uses Firefox and Safari. So anyway, 3 hours later, I figured out how to make IE behave.

Now what makes this so awesome is that you can do this with any TrueType or OpenType font you have on your machine! Just copy the font file somewhere into your website, find a nifty EOT converter, and walaah! Good to go. You get to use crazy fonts without worrying about wether the user has that font on their machine.

The Prep

Copy the font somewhere into your website. Keep in mind that if your font may have variants (ie. a bold version, italic version, bold-italic version, etc.). You’ll need to convert all these files to EOT format (IE’s way of making your life suck). Here’s a nifty little EOT converter that I use.

For the sake of this post, I’m going to use Century Gothic. It has 4 variants, shown below along with the file names I renamed them too.

• Regular: gothic-c.ttf, gothic-c.eot
• Bold: gothic-b.ttf, gothic-b.eot
• Italic: gothic-i.ttf, gothic-i.eot
• Bold Italic: gothic-b.ttf, gothic-b.eot

The How

When writing your CSS, you’ll need 2 rules for each variant. The IE rule will come first followed by the rest of the world rule (Firefox, Safari, etc.). If you put IE rule second, the code will fail. I’ve tested this on IE7 and 8.

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

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

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

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

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

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

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

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

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

/* ******* Century Gothic (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;
}

The Usage

Once you’ve got the CSS in place, just call the font like you would any other font.

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

The … Who?

I’ve tested the above code on Firefox 3, Safari 3, and IE 7 & 8 with no noticeable issues thus far. Awesome, and it only took me half my work day to figure out. Sorry I can’t show it to you in action, fucking free wordpress and all. You can take a look at these bad boys I used this method for: Aggieland Animal Hospital.