When designing websites, it is standard practice to use “Web Safe Fonts”. Web safe fonts are fonts that every Windows, Macintosh or Linux Operating systems have; even smartphones and tablets are able to display these fonts accurately. Standard web safe fonts include: Arial, Comic Sans, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, etc.. In the past designers would have to launch Photoshop and convert their NON-Web Safe Fonts into text artwork in order to render a custom look. While the objective of using a non web safe font was achieved, using images rather than text has numerous disadvantages, such as slower page load times, image text is invisible to search engines for indexing, the need to use alt tags, and time consuming when the text needs to be changed.

But with Cufon font replacement, it is now easy to replace web safe fonts with custom fonts, and best of all, it works in all browsers. Cufon is super fast and not dependent on a server side language. Cufon uses javascript jQuery technology.

For overall site content, web safe fonts should still be used as the standard, but for customizing heading tags and other special text, we especially like using Cufon font replacement.

To use Cufon on your website:

  1. Download the latest jQuery code from http://jquery.com/  Download the jquery-1.6.4.min.js  into your websites directory folder called /js
  2. Download the latest Cufon code File from http://cufon.shoqolate.com/ – Download cufon-yui.js into your websites directory folder called /js
  3. Generate your Cufon font javascript file on the Cufon website http://cufon.shoqolate.com/ , by clicking on the Regular Typeface button and uploading your font for conversion. You can also create optional boldface and italic fonts.  Acceptable font formats are TTF, OTF and PFB.  Windows users should move the font file out of the “Font” folder first in order to upload to Cufon. If desired, also upload the italic and bold files as well. Select the following glyphs: Uppercase, Lowercase, Numerals and Punctuation. Acknowledge the terms and click “Let’s do this!” When complete download the js files into your websites directory folder /js
  4. Upload the 3 js files to your live server.

Now you are ready to install the code:

  1. Add the following code between your <header></header> tags. Replace “yourfontname.font.js” with the name of your js file generated on the cufon site. The example code below replaces Heading Tags 1 through 5. This can be modified as desired to replace other tags. Alternatively: The Cufon.replace function could be added to an attached js file instead of writing it into the header of all site pages. :
    <!– Begin Cufon Font Replacement –>
    <script type=”text/javascript” src=”js/cufon-yui.js”></script>
    <script type=”text/javascript” src=”js/yourfontname.font.js“></script>
    <script type=”text/javascript”>
    Cufon.replace(‘h1, h2, h3, h4, h5′, { hover: ‘true’ });</script>
    <!– End Cufon Font Replacement –>
  2. In order to avoid a flicker/delay in IE,  add the following code just before your closing body tag </body>:
    <script type=”text/javascript”> Cufon.now(); </script>

Note: Always load the jquery code before Cufon.

There are 2 disadvantage with Cufon: 1.) the text can not be selected and 2.) those surfing the web with javascripts disabled will see the default web safe fonts instead of your custom font. I would also like to point out that it is extremely important that you ensure that you have the proper privileges to use a font.

Get creative with Cufon ! To use Cufon fonts on your website, give us a call at 973-726-0003 and a member of our design team would be glad to assist you.