Breaking Away from Boring Fonts with @Font-Face

One of the most tedious elements of web design has been the fact that, in a world where there are literally thousands of fonts to choose from designers have been restricted to around four. These four fonts—Arial, Verdana, Trebuchet and Courier—are used because most everyone's computer has them installed and, of course, that means that the page displays the way you want it to. The @font-face CSS3 addition allows a lot more flexibility in typography.

Using @Font-Face

When you use @font-face, you'll see that it works much as does inserting an image. The tag specifies the font family and the URL from which it's to be installed. The URL is on your server; you upload a folder with the font included in it.

@font-face {
font-family: YourFontName;
src: url(/YourFontName.otf);
}

You'll have to declare each variation of the font—bold, italic, etc.—to make sure it works right in the user's browser. Since Firefox 3.5, you can count on over 90% compatibility with this feature among web browsers, making it a viable option for professional designers. Internet Explorer has supported this CSS trick for years. It eliminates the need to use work around such as using images in place of text to ensure proper font display.

Concerns

Not all fonts are free to use. The font makers out there have different licensing schemes and you'll need to make sure that you are properly licensed to do so before you put any fonts up on your site. There are some free fonts out there, however, and you may want to limit yourself to these to avoid these hassles. In reality, there is usually a free font that is pretty close in appearance to any of the paid fonts out there and you can go the route of free fonts to save money. You can try these sites for free fonts:

  • FontSquirrel.com
  • OpenType.Info
  • DesignShock.com/Font-Face-Free-Fonts/