Using Webfonts

Until recently, you were stuck using a limited set of fonts for your webpages. These 'web-safe' fonts were guaranteed to be rendered in all browsers, but restricted you to a fairly plain set of generic text styles. To display more exotic fonts, you were forced to either include them as images (practical only for titles), or a few third-party tools like Cufon, which were effective but used javascript to render text and could be quite complex to implement. With the advent of Internet Explorer 9, and consequent versions of browsers like Firefox and Chrome, a new 'font-face' directive was made available in stylesheet files (.css).

The new 'font-face' directive allowed, for the first time, the inclusion of fonts outside the web-safe font range, and displaying text in almost any font you could choose. Here's an example of font-face in action in a stylesheet:

font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */

First you'll notice the unusual '@' qualifier in front of the directive. In basic terms, you choose a font-family and give it a stylesheet name (in the case above, 'myFirstFont'), then point this font name to the actual font files you have stored on your server (or referred to via a URL). The 'src' directive points to the actual font file name. You can use .ttf, .eot, .svg and .wot format font files, and should specify as many formats as you have to ensure at least one of them can be rendered in your browser.

Once you've set up your font-face clause, you can then go on to use the font in your stylesheet as if it were a web-safe font eg.:

p {
font-family: myFirstFont;
font-size: 14pt;

A fantastic resource of web fonts has been made available by Google,

or you can generate your own font files (with accompanying .css) at

Note that your fonts should be licenced to do the conversion. Many commerical fonts are not licenced, and some will not pass the conversion process because of this.