cufon vs @fontface

[sc:Cufon]

You don’t have to make your best looking fonts into an image, and you don’t have to use flash any more to make fonts look great. The two boxes above show Cufon and @fontface rendered at a few different sizes.

If you are a web designer and you are interested in making your website look good, these two font replacements options are probably going to come across your radar at some point. The good news is that these two methods allow you to make pretty much any font an option on a website. The bad news is that not all fonts are licensed for free use. The safest two options for selecting a font online are either to use Google’s font library, or to select a font from fontsquirrel.com.

Cufon

When selecting which method to use to embed your fonts, each one has its own benefits and problems. Cufón (similar to Typeface.js) is a Javascript-based font replacement solution which makes heavy use of canvas and VML. This offers a great alternative to other solutions out there – no Flash or images required.

The advantages;

• As you can see from the image above, it makes fonts look smooth and really sexy
• You can add gradients
• Works on most browsers

The disadvantages

• It is quite bulky compared to just straight CSS
• It adds page loading time
• You have to embed the font in javascript, which can get fiddly

Using Cufon
To use Cufon on your site , you add the cufon-yui.js file and your js font file to your header, like this;

<script type="text/javascript" src="path/to/cufon-yui.js"></script>

<script type="text/javascript" src="path/to/generated-font-file.js"></script>

You then style your text like this;

<script type=”text/javascript”>// <![CDATA[
Cufon.replace(‘h1?);
// ]]></script>

The above lines of code will replace all your h1 elements with images rendered in your font. If you want your fonts to be applied to entire sections, they you have to make sure you are using a selector engine like jquery.

You can also add linear gradients to your text with cufon.

@font-face

As you can see from our image above, @font-face is the less pretty cousin of cufon. At 40pt text it looks ok, but when it is down to 12pt font, it looks less ok.

The advantages

• It uses CSS so it renders very quickly
• No javascript involved

The disadvantages

• It is a little rough around the edges

Using @font-face

It’s easy to use @font-face, you simply include a rule in your style sheet, and reference to the font files almost as you would an image:
@font-face {
font-family: DeliciousRoman;
src: url(/Delicious-Roman.otf);
}
Then, if you want the font to appear in the H1, for example, use:
h1 {
font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}
The above example uses some fall-back options in case @font-face isn’t supported.