Home » IT & Tech Blogs » Information Technology » Programming/Development » Website Text Rendering – Smooth Text without Photoshop

Website Text Rendering – Smooth Text without Photoshop

Want your website to have nice Photoshop looking headings and subtitles without having to Photoshop your text?  If so, you need website text rendering.  Cufon has become a worthy alternative to sIFR (a js flash dynamic web fonts based website text renderer), which despite its merits still remains painfully tricky to set up and use. To achieve this ambitious goal the following requirements were set:

  1. No plug-ins required – it can only use features natively supported by the client
  2. Compatibility – it has to work on every major browser on the market
  3. Ease of use – no or near-zero configuration needed for standard use cases
  4. Speed – it has to be fast, even for sufficiently large amounts of text

Cufón consists of two individual parts – a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript.

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. This has numerous advantages:

  1. 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
  2. There is no need to manually parse the file on client-side again
  3. External JavaScript files block execution until they have loaded, which helps us to achieve a flicker-free, clean replacement
  4. 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.

How to use:

  1. Download cufon-yui.js from the Cufon website and upload it to your own server.
    – If you’re upgrading, just replace your old cufon-yui.js and you’re good to go. No need to convert your fonts again.
  2. Use the font converter (generator) on the website:
    1. Choose the font file you want to convert. Try not to enter the same file multiple times.
    2. In case of multiple font files, you may want to enter the font name to the font-family text box. This helps avoid naming troubles.
    3. Check the EULA checkbox right below the file upload fields (but only if you agree, of course).
    4. The default settings are good for most people. You don’t have to modify them.
    5. At the bottom, accept the generator terms. This is different from the EULA checkbox. Both must be checked.
    6. Submit the form and you’re done! If you get an error message, read it and act accordingly.
  3. Upload the generated .font.js file to your server. You may rename the file.
    Your HTML should look like this:

    <!doctype html>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>Playing with Cufón</title>
    <!– Stylesheets here, before all scripts. Helps avoid styling issues. –>
    <link rel=”stylesheet” type=”text/css” href=”style.css” />
    If you want to use complex selectors with Cufón, load a selector engine (JavaScript framework) here.
    We support jQuery, Sizzle, MooTools, Dojo, Prototype and other popular frameworks.
    <script src=”cufon-yui.js” type=”text/javascript”></script>
    <script src=”YourFont.font.js” type=”text/javascript”></script>
    <script type=”text/javascript”>
    Cufon.replace(‘h1’); // Works without a selector engine
    Cufon.replace(‘#sub1’); // Requires a selector engine for IE 6-7, see above
    <h1>Your custom font here</h1>
    <h2 id=”sub1″>Your custom font here too</h2>
    <!– To avoid delays, initialize Cufón before other scripts at the bottom –>
    <script type=”text/javascript”> Cufon.now(); </script>
    <!– Google Analytics and other scripts here –>

  • And you’re set! To avoid hard-to-spot issues, here are a few things to look out for in your HTML:
    – A transitional doctype will break line-height, use a strict or HTML5 doctype.
    – Avoid whitespace (or anything else for that matter) before the doctype. This has been known to affect printing in IE.
    – UTF-8 is the only supported character set. Use others at your own risk. Characters may go missing

For help, visit: https://groups.google.com/forum/?fromgroups#!forum/cufon

Source: Cufon

Thank you for reading IT Blog

Originally posted 2012-07-25 12:49:00. Republished by Blog Post Promoter

Check Also

Enhancing User Experience with iOS Latest Technologies

Wow your users with a great user experience by leveraging these new iOS technologies. Make the good better.


  1. so fresh so clean

  2. Very clean, makes text look like photoshop text image

  3. Can silverlight doe this?

  4. This made my site look awesome!

  5. Cufon is great, just don’t like how you can’t copy and paste.

Information Technology Blog

Accessibility Tools