What is @font-face?

@font-face is basically a CSS rule that allows you to embed a font in your website so that viewers of your site will see that font even if it’s not installed on their computer. There is no JavaScript, Flash or images needed as this method basically uses a single font file that you upload onto your server.

Why use @font-face?

@font-face is a simple and elegant way to embed a font in your website and is in most cases superior to all other font embedding methods. It requires only the font you wish to use along with some CSS. Best of all @font-face is fully compatible with all major browsers. It’s search engine friendly and setting it up is quick and easy. No coding required. Sounds too good to be true doesn’t it?

How to use @font-face

You basically just need to buy/download the font you wish to use (you must have a license to use the font) and then add the following rule to your style sheet to reference your font. As an example let’s embed the Action Man font into our website.

@font-face {
 font-family: ActionMan;
 src: url(/font/ActionMan.ttf) format("truetype");
}

Now that your font is embedded in your website you can use it as you would any other font. Lets use our embedded font on our h1 tags like so.

h1 {font-family: ActionMan, Verdana, Helvetica, sans-serif;}

In order for your font to be cross browser compatible you will need a few different font file types for different browsers. Font Squirrel is a great resource that has made it very easy to use @font-face on your website by providing @font-face kits. These kits basically contain the original TrueType or OpenType fonts for Firefox, Opera, Safari and Chrome along with the EOT fonts for Internet Explorer. There are lots of great fonts to choose from, many of which are free for commercial use.

Issues with @font-face

Surprisingly, there are not really any issues with using @font-face to embed fonts in your website. But there are two things to be aware of. Firstly, your font will need to be downloaded by your website viewers which will usually cost you around 30KB of bandwidth for a typical font (which isn’t much at all). Secondly, as your font loads your website viewers may sometimes see the default font flash first for a second on the web page. Most people can live with that.

@font-face is quick to setup, simple to use, light weight, SEO friendly and browser compatible. The best method I have come across to embed a font in a website.

Here are two of the best options I have come across to embed fonts in your website:

1. Dynamic Text Replacement: This method involves dynamically creating image files from the text on your website and it is great for creating nice looking headings on your website.
2. sIFR 3: This method uses a flash file to dynamically display your font and it can be styled using CSS.

I would recommend using either of these methods to embed fonts on your website. SIFR 3 is my favorite though, as it is very flexible and can be easily controlled using CSS. I will outline both of these methods below and help you get started using them on your website.You can also download the files for Dynamic Text Replacement and sIFR 3 below.

Dynamic Text Replacement

Dynamic text replacement involves dynamically creating images to replace and enhance page headings using only PHP and CSS. No javascript is required which may be an advantage for web designers trying to decrease the amount of javascript on their webpage. You can see a demo here.

How does it work?

This Dynamic text replacement method uses PHP’s output buffering functions to parse the web page for heading tags, extract the text from the headings and assign an inline style that points to the image generator script.

A CSS file controls the font-colour, background colour and also the size of the font.

Limitations of this method

• This method cannot support very long headings as it can’t display text over multiple lines. So it’s only good for single line headings.
• You can’t give your headings any style attributes (id’s or classes).
• You can’t have different heading styles for different pages on your website. The style information is included in the script itself so it applies to the website as a whole.

Developers of this method

Original concept by Alex Giron, code and execution by R. Marie Cox.

Download Dynamic Text Replacement

sIFR 3 Font Embedding

Sifr 3 uses a combination of Flash, CSS and javascript to dynamically display fonts on your website. An swf file with a font embedded in it is used to replace certain CSS divs on your website. This is quite a clever and versatile method of font embedding as it can be controlled via CSS. It is also quite light as it only requires a small swf file along with a small snippet of javascript. Another great thing about sIFR 3 is that it is great for SEO, as it maintains the original HTML structure. A demo of sIFR 3 can be seen here.

How does it work?

sIFR 3 is made up from four parts:

1. An SWF file that contains the font you wish to embed in your website. To use your specific font simply open the FLA file (included in the download below) and change the font of the dynamic text field then export the SWF.
2. A javascript file called “sifr.js” which contains the script that makes sifr work. This file should just be included in the header of your website e.g.

   <script src="js/sifr.js" type="text/javascript"></script>

3. Another javascript file called “sifr-config.js”. This file points to the SWF file you created. You also define the CSS styles of the div you are going to replace with the swf file.
4. A CSS file which basically tells your browser to hide your original text as it is now being replaced with the nice looking font embedded in your SWF file. This CSS file needs to be included in your header e.g.
   

   <link rel="stylesheet" href="../css/sifr.css" type="text/css">

Limitations of this method

• It is sometimes difficult to create a link from text that uses sIFR 3.
• sIFR 3 relies on flash and javascript so it won’t display on browsers that don’t have flash and javascript enabled. This isn’t really a problem as sIFR 3 will revert back to the normal version of your text if javascript is not enabled and most browsers come with flash player anyway.

Developer of this method

The developer of sIFR 3 is Mark Wubben. Mark is a European Dutchman and web hacker, based in Copenhagen, Denmark. Supercollider is Mark’s freelance alter-ego.

Download sIFR 3

[Update: 27.10.2009]

Other great font embedding methods

Cufon

Cufon is one of the most popular font embedding solutions due to its simplicity to setup and use. It basically uses javascript and consists of a font generator and a Javascript rendering engine. It doesn’t use any flash so it loads quite quickly when compared to sIFR 3.

FLIR

Facelift Image Replacement is another clever way to embed fonts in your website. It uses PHP and the GD library to render text as an image behind the scenes. So you will need PHP and GD on your server to use this method.

PIR

PHP Image Replacement uses PHP and jQuery to dynamically generate images for your text. It  basically requires you to upload a standard font file to your web server and it uses this along with your CSS to display your font accordingly.

Font Jazz

Font Jazz implements a simple Javascript type rendering engine which actually converts each character of your text into an image with the specified font.