|This is Amaranth rendered using cufon. 8pt, 24pt, 36pt, 50pt!?%$&*|
|This is Amaranth rendered using @fontface. 8pt, 24pt, 36pt, 50pt!?$&*|
|This is Molle rendered using cufon. 8pt, 24pt, 36pt, 50pt!?%$&*|
|This is Molle rendered using @fontface. 8pt, 24pt, 36pt, 50pt!?$&*|
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.
- As you can see from the image above, it makes fonts look smooth and really sexy
- You can add gradients
- Works on most browsers
- It is quite bulky compared to just straight CSS
- It adds page loading time
To use Cufon on your site , you add the cufon-yui.js file and your js font file to your header, like this;
You then style your text like this;
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.
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.
- It uses CSS so it renders very quickly
- It is a little rough around the edges
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:
Then, if you want the font to appear in the H1, for example, use:
font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
The above example uses some fall-back options in case @font-face isn’t supported.