Typography has been one of the main aspects of design ever since circa 3000 BC, when writing was invented. One can make quite some beautiful things by just choosing his font right and styling it correctly. But can we do it on the web? Can we use our own fonts?

Microsoft already solved this problem, way back in 1997. Internet Explorer version 4 brought support for embedding a font into a website, using css. Click here to see what I’m talking about. By using a special program, such as WEFT one is able to embed any True Type font with proper permissions into a website, by converting it into a .eot format. Nifty.
Let’s look at the css that does it. This is the main font style:

@font-face {
font-family: Piefont;
font-style: normal;
font-weight: normal;
src: url(PIE0.eot);
}

This would define a new font-family Piefont. It can be used as any other font:

p { font-family: Piefont; }

This would render all paragraphs in the font PIE0.eot. Now for some demos (IE screenshots lack font anti-aliasing, this is not necessarily always so):

• Demo 1 shows a simple page with an embedded font. See how it renders.
• Demo 3 illustrates what we can achieve by using special fonts. See screenshot.

Now this is great, I hear you say. Sure it is… for Internet Explorer users. But it doesn’t work in any other browser.

And what does W3 have to say about this? Well they defined very similar (if not the same) support for font embedding in CSS2, but it was removed by CSS 2.1, due to lack of browser support (or so they say). It’s being reintroduced in CSS3.

What about browser support? Currently font embedding is only supported in Internet Explorer, using the way described above. The w3 way, using True type fonts, however, is not supported anywhere.

I also recommend reading this ALA article for what can, or better yet, should be possible with font embedding.

So from a designer’s point of view, it’s a real pity we’re only limited to a few web-safe fonts. It does limit creativity. But from a surfer’s perspective, after seeing all the animated gifs, marquees, background sounds, etc., I’m really glad font-embedding isn’t widely supported.

To summarise what you should know as a developer - Using the simple “font-family: verdana, sans-serif;” to specify a font (and a font family, just in case) is still about the most you can do today on the web. But keep in mind that adjusting the spacing, line-height, etc. can do quite a lot. If you haven’t already, I suggest reading this website for a handful of tips on web typography. You can also use images for special fonts, but it comes with usability deficiencies, such as lack of font-size adjustments, broken searches and low quality printed pages.