Embedding font using Cufón
Cufón aims to become a worthy alternative to sIFR, (sIFR, or Scalable Inman Flash Replacement, is a technology that allows you to replace text elements on screen with Flash equivalents), which despite its merits still remains painfully tricky to set up and use. To achieve this ambitious goal the following requirements were set:
No plug-ins required – it can only use features natively supported by the client
Compatibility – it has to work on every major browser on the market
Ease of use – no or near-zero configuration needed for standard use cases
Speed – it has to be fast, even for sufficiently large amounts of text
And now, after nearly a year of planning and research we believe that these requirements have been met.
So, how does it work?
The following browsers are supported:
- Internet Explorer 6, 7 and 8
- Internet Explorer 9 beta (as of 1.09i)
- Mozilla Firefox 1.5+
- Safari 3+
- Opera 9.5+ (9.01+ as of 1.10)
- Google Chrome 1.0+
- iOS 2.0+
- Opera Mini (to a certain degree)
Step 1 – Get cufón!
It is highly recommended that you always use the YUI-compressed version of cufón, available from the cufón website.
Updating to a newer version? Just replace your old cufon-yui.js with the new one and you’re good to go. Fonts need not be converted again.
Should you experience problems or if you just want to poke around a little, you may also use the uncompressed version, available from GitHub.
Step 2 – Generate a font
You may use the font generator at our website or run a copy of your own. If you plan on going for the latter option you’re probably clever enough to figure out how to get it running – the source is available from GitHub.
The name of the resulting file will include the name of the font and the weight of the font (as a number – 400 is equivalent to “normal” and 600 means “bold”). So, for example, the bold version of Bitstream Vera Sans would result in a file called Bitstream_Vera_Sans_600.font.js. The name of the file doesn’t actually matter at all, but it makes it easier for you to identify your fonts.
Using the generator should be pretty straightforward.
Step 3 – Replacing text
For the purposes of this example you may ignore everything that is not contained by <head>.
So what exactly happens here?
First, we include the YUI compressed version of cufón that you should always use.
Then we get to the magic part. We want to replace all <h1> elements in the document. And that’s exactly what the tell cufón to do, with Cufon.replace(‘h1′). Nothing else is needed, cufón will use the CSS rules associated with the elements and determine what to do. You should not place Cufon.replace inside $(document).ready or similar functionality because it will make Step 4 ineffective.
Step 4 – Making Internet Explorer behave
Unfortunately one problem remains with Internet Explorer. In most cases, there is a short but visible delay before the text is replaced. You can avoid this issue by inserting the following snippet right before the closing </body> tag (or before any external scripts such as Google Analytics):
And the delay is gone. For a more in-depth example, see API.
Note: This step will hopefully become obsolete in the future.
Using multiple fonts
To use multiple fonts you only need to specify which font you want to use and you’re set:
If not specified, cufón will use the font that was loaded last (in this case it would be Myriad Pro), which is why there was no need to specify the font in the first example.
For simplicity, all examples use the HTML4 strict doctype instead of an XHTML doctype. You may use any doctype you want but a strict (X)HTML doctype will always yield best results. Quirks mode isn’t supported but might also work in some cases.
All cufón-enabled pages must be UTF-8 encoded. Compatible encodings, such as US-ASCII, are also fine
Above information found here: http://wiki.github.com/sorccu/cufon/usage