How to use custom fonts with cufon
Posted on May 18th, 2009 by Glenn Reffin
Are you bored of using the same old ‘web-safe’ fonts on your sites? Developers have been looking for ways to solve the old problem of having just a few fonts available across platforms for some time. The most recent methods of font replacement, such as SWIFr, used flash technology to transform text into a replacement font and to display it on screen as an image. Now, there are a variety of such font replacement methods available, including Cufón to display text in any font you choose; it’s fast, reliable and simple to use.
Cufón uses JavaScript to draw text as you go with the HTML 5 <canvas> element. Despite being an HTML 5 element, support for the tag is widespread and is even available in Internet Explorer 6.
There are two key things to be aware of:
- Text drawn using Cufón cannot be selected in the browser – it is a vector image transformed by JSON;
- You must have a license to publish the font on the web and embed it in your site.
Background
Simo Kinnunen from Finland developed Cufón as a web font replacement solution. What Cufón does is transform the font into a scalable vector graphic, convert it into Vector Markup Language (VML), convert the VML into JavaScript Object Notation (JSON) and then embed the JSON into the web page using JavaScript functions and an HTML tag.
The downside is that the text is rendered as a drawing. It may sound complicated but really, it is fairly easy to implement and it is fast and efficient.
Pros and cons
There are pros and cons with all the various methods of font replacement available. Let’s take a brief look at the main ones:
SWIFr
This renders the text as a flash image. There is usually a slight lag between the rendering of the page and the implementation of the font replacement. This can cause a flicker of the original text before it is transformed within SWIFr. The use of SWIFr does not allow the formatting of the text within the page and it relies on technologies that are not core to the browser.
Cufón
This renders the text as a vector image, using JSON. Like SWIFr, there can be a lag between rendering the page and the implementation of the font replacement that can cause flickering between the original and the rendered font. Again, Cufón uses technology (in this case, JavaScript) to render the effect, which may be turned off by the user in the browser. Cufón is more controllable within the page than SWIFr and is slightly more reliable. It does not require the installation of several different font formats, but it does require a licence to be held for any fonts that are used and published on a web site.
@font-face
@font-face has been around for a while but it is really starting to come into its own with the advent of HTML 5 and updated browsers that can handle it properly. @font-face is a CSS property, which means that it is fully integrated with the browser and does not rely on any technology to be turned on. It is therefore much faster to render within the browser than the other two solutions. However, it does require various formats of the font to be available, either on the web site or from a font repository, and these have to be downloaded with the page for the font to be utilised on the page. This is a method that is really starting to make headway and is likely to take over from the other font replacement methods that are available in the future. We’ll be looking at this method further in future posts.
Useable fonts
Almost any font can be used with Cufón, whether you have TrueType Fonts (TTF), OpenType Fonts(OTF), Pointer Font Binaries (PFB) or PostScript Fonts (PSF), they can all be used. The only restriction is the licence you hold for that font. Commercial fonts often require you to have a second, more expensive licence to allow you to embed the font into a web site. You must check your licence to ensure that you abide by the licence agreement and not infringe the rights of the font developer.
How do you use Cufón?
- Go to cufon.shoqolate.com and download the cufon-yui.js file to your site folder. This is the JavaScript rendering engine that will create the redrawn font.
- Set up your web site using normal HTML and CSS and find a font that you can use in accordance with your licence.
- Next, go to cufon.shoqolate.com/generate,
- Select the relevant font(s) (NOTE: it is advisable to make a copy of the font in a separate folder before undertaking this process to avoid any mishaps to your existing font files),
- Choose a name for the font family,
- Click to agree that the EULA (end-user licence agreement) allows you to embed the font in your web site
- Select all the character sets (glyphs) that you want to use (the fewer selected the smaller the file size)
- rovide the domain names for the domains where the font will be used (this stops linking from elsewhere and other security issues),
- Select the EM size, optimisation paths and kerning tables for your font — this is a trade off between features and file size, so you need to choose what you are willing to sacrifice for file size here. Bear in mind that for small font sizes it is recommended to turn off path optimisation.
- Click on the ‘Let’s Do This’ button and download the file to your web site directory (put it with the cufon-yui.js file).
- Now you need to move to your web pages and open them in a text editor. In the HTML page, you need to place Cufón after any calls to stylesheets. You need to call teh rendering engine first, followed by the font file. The scripts are as follows:
<script type="text/javascript" src="[directory]/cufon-yui.js"></script> <script type="text/javascript" src="[directory]/[font-family].font.js"></script>
Now, let’s replace some text elements in the HTML page:
- Add the following code below the two script codes you just inserted:
<script type="text/javascript"> Cufon.replace('h1'); Cufon.replace('h2'); Cufon.replace('h3'); </script>
Add some effects
You have now changed the H1, H2 and H3 tags to your chosen font. But the script also allows you to render other effects on your text, such as a
Drop shadow:
Cufon.replace('h1', {textShadow: '1px 1px rgba( 0, 0, 0, 0.2)'});
Gradient:
Cufon.replace('h2', {color: '-linear-gradient(white,#990000)'}); Cufon.replace('h3', {color: '-linear-gradient(#fff, 0.4=#999, 0.5=#ccc, #ccc)'}); // shades into different colours at the specified points - 40%, 50%, to the end of the H3.
Final words
There is no reason why you can’t use this method on any text element in your HTML page. You can also extend Cufón by using a selector engine, such as Google’s.
As with SWIFr and other replacement engines, there is a delay between the page loading and the rendering taking place. To prevent this, simply call cufon.now() before any scripts running prior to the closing </body> tag.
Find out more at: wiki.github.com/sorccu/cufon.
Glenn Reffin
Latest posts by Glenn Reffin (see all)
- Welcome to the new look - 14 February, 2022
- How to replace fonts using CSS3 font-face - 5 September, 2011
- 5 tips for better web site construction - 16 January, 2011
- 10 tips to write better content - 12 August, 2009
- 6 ways a small business can beat the recession - 29 June, 2009
- Typography