I have always been envious of graphic designer for their ability of using every font they want in their projects, playing with typography and creating beautiful design while I had to limit myself to a few web-safe font families. Although with the appearance of Cufón and @font-face the difference between print typography and web typography didn’t change much, this is still a big step towards the future when, I hope, we can replace all the fonts on a site without overloading the server that’s hosting it or the computer you are using.
There were previous tools with which you could use various fonts on web, tools like sIFR or FLIR but they were pretty difficult to implement, comparing to Cufón or @font-face, and they were loading pretty slow. It’s hard to tell at the moment if another tool like these presented in the article will be invented in the near future and overcome them, but for the moment we can use Cufón and @font-face to make better web typography and I find that a blessing.
Cufón
Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use. Cufón consists of two individual parts – a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript.
In reality the generator is little more than a web-based interface to FontForge. First, the generator builds a custom FontForge script based on user input and then runs it, saving the result as an SVG font. The SVG font is then parsed and SVG paths are converted to VML paths. This is a crucial step in achieving stellar performance in Internet Explorer, as it supports VML natively. The resulting document is then converted into JSON with a mix of functional JavaScript.
There are several advantages of using Cufón:
- To include a font, you only need to load it with the standard < script > tag as any other JavaScript file and it will be registered automatically
- There is no need to manually parse the file on client-side again
- External JavaScript files block execution until they have loaded, which helps us to achieve a flicker-free, clean replacement
- It compresses extremely well. While often somewhat large in terms of file size without any compression, a compressed font usually weighs in 60-80% less than the original.
Browser support:
- Internet Explorer 6, 7 and 8
- Internet Explorer 9 beta (as of 1.09i)
- Mozilla Firefox 1.5+
- Safari 3+
- Opera 9.5+
- Google Chrome 1.0+
- iOS 2.0+
- Opera Mini (to a certain degree)
How to use Cufón
First, you have to use the Cufón Generator to customize the way the font will render. There are many options from which you can choose so you will find this at least interesting. After you finish the setup you will have a Javascript file which you will include in the HTML along with cufon.js in the head section of the page.
<script src="cufon.js" type="text/javascript"></script>
<script src="Titillium_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('#divname h2');
</script>
There have been reported some problems with Internet Explorer which delays the appearance of the new font, but this can be solved with the following code inserted before the ending of the < body > tag.
<script type="text/javascript"> Cufon.now(); </script>
Styling the font with CSS
The rules that apply to CSS text customizing also apply on Cufón but there are a few things that you must take care of so that the font can be viewed properly.
Because of Internet Explorer’s “awesomeness” the font-style < em > and < i > are reported as normal instead of italic so you have to make sure you set it in the CSS file to be displayed properly.
em, i {
font-style: italic;
}
For the :hover attribute to work you have to use the following line. It is disabled by default due to performance issues.
Cufon.replace('#divname h2', {
hover: true
});
By default cufón will only apply :hover effects to links (< a >). You can change this with:
Cufon.replace('#divname h2', {
hover: true,
hoverables: { strong: true, em: true }
});
Known bugs
- Internet Explorer: should you not call Cufon.now() just before the closing
