Embedding Fonts With CSS (IE only)

I'm not a big fan of forcing users to see things 'my way' but a client recently wanted to use a wacky font for headings, and was only concerned with viewers using IE. (Whether this is a good idea or not is for a different discussion!)

Fortunately, Microsoft provide a solution to this problem via font embedding. The font needed in this case was 'Cooper Bold'. It's actually present on some systems (I think Office 2007 might install it) but isn't exactly common.

The way to embed a font for IE is to get a copy of the font in an Embedded Object Type (EOT) format, which can be achieved using Microsoft's Web Embedding Fonts Tool (WEFT). Once you've ploughed through the options (I ended up making a local file with a font face declaration in it) you simply add CSS rules to force the EOT font wherever the font you want to appear should be, in my case:

@font-face {
font-family: 'Cooper Black';
font-style: normal;
font-weight: normal;
src: url(/COOPERB2.eot);

Not an ideal situation by any means, but certainly quicker than creating dozens of header images and perhaps using CSS image replacement!


Add new comment