How to Use Any Font You Like With CSS3

Custom fonts are among the most potentially appealing aspects of CSS3 for designers. With the font-face rule, you can render any font you have online within your web page text, regardless of whether the user has it installed or not. As with most CSS3 techniques, the basic code is pretty simple, but the practical reality is a little more complex. In this short tutorial, Susan Smith will run through the basics of including custom fonts in your pages.

First, make sure that the font you want to use is licensed for web use. Almost all free fonts can be used on a website and many premium fonts are available with a license that covers web usage. Remember to include the files for any variants of the font you plan on using, such as bold or italic. You can use EOT (Embedded OpenType) files for Internet Explorer and either OTF (OpenType) or TTF (TrueType) for the rest. (Additional options include WOFF (Web Open Font Format) and SVG (Scalable Vector Graphics) but Susan Smith will stick to more common types here.) Open the HTML or CSS file for the page you are working with. Add a font-face declaration to the style code. First inside the font-face section, give the font a name you can later use to refer to it. Next, still inside the font-face section, provide the location of the EOT file.