About design and nearby

Using Non-standard Fonts with Cufón.js

Posted: November 17th, 2010 | Author: | Filed under: Tips and Tricks | Tags: , , | No Comments »

During some time I was looking for the way to apply any non-standard font for a website. I do not like to use Flash, so I didn’t think about sIFR. And I’m not happy with pasting images instead of font… and using {font-family: sans-serif;} is not the best variant for some projects. You may say me about Typeface.js – yes, it works and it’s purely Javascript, but I was looking for more prompt script.

I found Cufón javascript by accident, when I was redacting the website.

Why do I like it? Well..
Cufón is javascript only (like typeface.js), but it’s size is rather smaller and speed is incredible )) Cufon is supported with all the most common browsers and pretty simple to use.

Setting up Cufón
1. Take a file with your non-standart font.
2. Go at cufon.shoqolate.com/generate/ and fill a form according to your needs.
3. Download the actual distribution Cufón, which is in a compressed format takes 14 KB: cufon.shoqolate.com/js/cufon-yui.js
4. Connect these two files into the document as usual:

  1. <script type="text/javascript" src="./js/cufon-yui.js"></ script>
  2. <script type = "text / javascript" src = "./js/myriad_pro_italic_400.font.js "></ script> (for Myriad Pro, font-style:italic)

5. Choose which elements you want to draw with your beautiful font:

  1. <script type="text / javascript">
  2. $(document).ready(function(){
  3. Cufon.replace("h1");
  4. });
  5. </script>

For example, all headers h1:

  1. <script type="text/javascript"> Cufon.replace ("h1"); </ script>

6. That’s it!

Note1: For people who care about the users IE. The developers recommend to insert the following code just before </ body> or before calling any external script:

  1. <script type="text/javascript"> Cufon.now (); </ script>

Note2: For people who care about the users IE7. I find that IE7 is sensitive to the order of loading js, so you should start with JQuery – before cufon.js and font.js.

Note3: Color, size and other options for drawing are taken from the rules of CSS. If they are of course given. Or you are able to go this way (‘text-transform’ property for elements with id ‘header_text’):

  1. <script type="text/javascript">
  2.     Cufon.replace("#header_text");
  3.     Cufon.replace("#header_text", {textShadow:'1px 1px 1px white'});  
  4. </script>

Unfortunatelly, I find that Cufon doesn’t support ‘line-height’ property for IE7 (so feel free to code that at other way especially for IE7).

Note4. Cufón text is not selectable (but you are still able to select the original HTML text – from the ‘page source’).

Anyway, I’m happy with using Cufón in spite of all its disadvantages.

Live example: check the example >>

Related post: Cufón.js and Hover Effect
Related post: Using Cufón.js with jCarousel

Share Button

Check Related Posts:


Leave a Reply


  • one + = 6

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now