Skip to content

Using font-face

With more browsers now supporting the @font-face CSS property, we can finally start to use fonts that might not be installed on a users computer, i.e.: a “non-web-standard” or premium (purchased) fonts.

Update Sept 2010: Take a look at [FontSquirrel’s generator](http://www.fontsquirrel.com/tools/webfont-generator). It is an great tool for generating code required to implement `@font-face`.

This isn’t exactly a new feature to the web as Microsoft has been supporting custom fonts in the form of .eot files since Internet Explorer 4! But with all of the major browsers now supporting .otf, .ttf or .eot, you can expect to see more websites using the @font-face CSS property to include personal or corporate fonts in their font stacks. This could mean we see a decline in the number of people using the old image replacement or SIFR methods.

So how do we include these fonts?

Firstly, we need to make sure we have the two files that are needed to support popular browsers. The .ttf file is typically the one you will already have if you downloaded a free font or have purchased a font for your website or branding. Either way, do make sure your licence covers you for using this font on the web.

Creating the .eot file

As stated, the .eot file is used by Internet Explorer and there are two ways of creating this file:

  1. If you want the file to be registered to a domain, thus preventing your font from being used on another site, then checkout Microsoft’s Web Embedding Fonts Tool. I will not go into any detail on how to use this tool as it is a little tedious and there is plenty of guidance on the website.
  2. Alternatively, you can use ttf2eot, which is a simple but neat little tool that will convert your .ttf file to an .eot file. However at present this tool does NOT limit the .eot file to your domain, which could result in someone stealing the font!

If you already have an .otf file, they are also supported by Firefox 3.5, Safari 3.1 and Opera 10. There are several programs out there that will help you convert an .otf file to an .eot file.

The @font-face property

So to include the font-face property in our CSS file we need to set a few common values and include a .ttf or.otf file:

@font-face {
  font-family: "rabiohead"; /* specifies the name of the font */
  src: url('fonts/rabiohead.ttf'); /* URL of the file location this can be an .otf file if you prefer */
}

Then we include the .eot file for Internet Explorer users. This should go in our IE conditional style sheet(s):

@font-face {
  font-family: "rabiohead";
  src: url('fonts/rabiohead.eot'); /* note the eot file extension */
}

If you know the fonts full name, and the postscript name (required for Safari) they can be included as a “local” source. These values are worth including as the user may already has the file on their system, which will help to reduce server requests and improve load time as the file is not downloaded from the URL:

@font-face {
  font-family: "rabiohead";
  src: local("Rabiohead"), /* font full name */
       local("Rabiohead-Regular"), /* font postscript name for Safari */
       url('fonts/rabiohead.ttf');
}

Finally we can include our new font in our font-family stack. Don’t forget to include sensible alternatives for users with old browsers that do not support the @font-face property:

h1,
h2,
h3,
h4 {font-family: rabiohead,Arial,Helvetica,Sans-Serif; }

That’s it!

There could be times when you might find yourself still needing to use the SIFR or image replacement method, but in my opinion the @font-face method now provides a simple solution, which will allow easy implementation of personal/corporate fonts on your site!

Useful links