Stop!: I highly recommend you find an alternative to Cufon, use
@font-face. Cufon is a very poor method for loading custom font resources in a modern web environment. Only proceed if you have no other choice, but if you have a choice, use Font Squirrel’s Web Font generator.
Cufón font replacement is an easy way to embed custom fonts on the web. There are many ways to embed fonts onto a website, Cufón is just one method. I find it to be one of the best ways, depending on the project. Here’s a quick ‘how-to’ on embedding those custom fonts you love.
It only takes a few minutes to get Cufón working on your website:
- Download Cufón
- Upload to Server and Code Setup
- Use jQuery to load Cufón
- Choosing what to Cufón
The rest of this article takes you through the above steps, hopefully as clearly as possible – and I’ve also included a free download pack at the end with everything setup for you, should you wish to fast track this tutorial/keep for future purposes.
1. Download Cufon
Visit Cufón’s website and download the latest version to your computer (preferably in a nice new folder for this project). Currently the latest version is 1.09i which now supports the latest release of Internet Explorer. Probably best to call this file ‘cufon.js’.
3. Upload to Server and Code Setup
Taking Cufon.js (Step 1) and our custom font (Step 2) we need to reference the scripts in our HTML file.
4. Use jQuery to load Cufon
Seeing as you’re more than likely to be using jQuery on your website, we may as well make use of jQuery’s selector engine. Grab the latest version of jQuery here or find it on Google’s CDN.
5. Choosing what to Cufon
Now we’ve got our code setup to call the Cufón, we need to tell it what to replace so we can get it working. This is done through targeting HTML with (or without) CSS classes. Cufón isn’t really that great for body text, so we don’t want to Cufón everything on the page, just our headings.
Option 1: If you are going to want all your website headings to be Cufónized, then we need to add something a little like the below. This tells Cufón to replace all our h1,h2,h3,h4,h5 tags. Which means we don’t have to worry about manually selecting which headings (with CSS classes/id’s) we’d like to Cufónized.
Option 2: Create a custom class (for example .cufon) that we can add to HTML elements that need a touch of Cufónism. This may look like so:
Putting all that together (and in the correct load order) you’ll end up with this as a finished product. Demo is free for download below.
Check out the EULAs of all fonts you use to ensure they allow for Web Embedding.