Dominique Stender Good software is only the beginning…

Web enabled custom fonts with cufón

A frequent issue in web development is the clients wish for individual fonts for this site. This ranges from the understandable desire to maximize the companys corporate image by using the corporate fonts to more or less useless eye candy such as in headlines and menus.

The solution that comes up by reflex is to use graphics, often auto generated. But keep in mind that graphics are meaningless for search engines. Your SEO suffers if you use graphical headlines (the most important bits of information as far as search engines are concerned).

The next solution is flash. Google is able to read flash, so your SEO might suffer not that much. But what about your visitors? Ok, Flash is installed on virtually any PC these days. But not on the iPhone. So do you care about your mobile visitors? I think you should.

Furthermore, I use the NoScript Firefox extension as a security measure to disable JavaScript and many other "dynamic" content such as Flash by default. So I won't see your Flash headlines - all I see is a nasty empty box with the NoScript logo. Don't think I'll enable Flash just to see your headlines. Chances are that I leave your site in favor of another one with similar content, without flash.

Enter Cufón, a pure JavaScript implementation that is able to render TrueType fonts in all modern browsers. It works by converting your classical .ttf or .odf file into a JavaScript representation and rendering it through SVG. Check their in-depth explanation how that works. It utilizes JQuery so you can easily use the JQuery selectors to convert a headline into a nice font, or all paragraphs with a certain class:

<script type="text/javascript">
    Cufon.replace('h1', { fontFamily: 'Vegur' });
    Cufon.replace('.menu', { fontFamily: 'Myriad Pro' });
</script>

Check the usage page on the Cufón website for a detailed explanation.

Why I prefer Cufón

There are a few things that really make Cufón stand out:

For me the best thing about Cufón is that it degrades nicely. If JavaScript is disabled or blocked as in my case your visitor will still see the standard html tags in their natural font as defined in your StyleSheet. No content will disappear.

Search engines are save. Your headline is still there, will be indexed and your SEO won't suffer at all.

It is style-able. You can style your truetype headlines through Cascading Style Sheets just like you would without Cufón. Set the color, size etc just like you used to.

Cufón is easy. If you're even slightly familiar with JavaScript and CSS, you don't have to learn anything new.

Conclusion

Although Cufón has it's limits it is by far the best solution to the custom font issue on the web today.

Give it a try, I'm convinced you won't be disappointed.

Best of all while stable, Cufón is still in active development so we all can expect improvements and fixed to come up pretty frequently.

Related Posts:

• No Related Posts