Marc Blase

Adding fonts to the web

Finally, and without javascript do we now have the ability to add our fonts to the web using @font-face. It’s all done with these two declarations in our CSS files:

@font-face{
font-family:'Our-Font-Name';
src: url('path/to/our/font.otf') format('opentype');
}

p {
font-family:'Our-Font-Name', georgia, serif;
}

This article contains all of the necessary info to make it work via CSS3. The article also includes instructions for some low-level hacking so fonts are also visible in the bane of the internet – IE.

And you can go ahead and skip the WEFT install and conversion with this handy tool for TTF to EFT conversion.

UPDATE: To get fonts to really work on the web, in all browsers, on all platforms I’ve decided to go with TypeKit. There is some bandwidth overhead and some minor bloat to your <head> tag but the end result is worth it.

Published on October 8, 2010