Cufon 101

1. Include the JavaScript for Cufón and the Cufón font

<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/TitilliumMaps.font.js"></script>

2. HTML

Normal tags

<h1>Business Solutions</h1>
<h2>Business Insurance</h2>

3. Tell Cufón to replace the fonts for the specified CSS selectors

<script type="text/javascript">
    Cufon.replace('h1, h2', { fontFamily: 'TitilliumMaps26L', hover: true });
</script>

4. Add JavaScript error handling in case there is an error loading

function handleError() { return true; }
window.onerror = handleError;

5. CSS

The font color, size and hover color is controlled via the CSS classes associated with the HTML element.

h1 {
   font-size: 50px;
   color: red;
}

Reference URL

Comments

  1. User Avatar
    Deane

    Hi, I’ve used Cufon on certain types, but one issue ive faced is that different fonts render in different sizes, that is say a 36px arial would be much larger than the 36px for my cufon-induced font, so if someone has javascript disabled, then the site looks messed up.

    Any pointers on how to mitiage this? thanks.

    • User Avatar
      Geoff
      Permalink to comment#

      Deane,

      Check out the ‘Special Cases’ section under
      http://wiki.github.com/sorccu/cufon/styling

      When cufon replaces your elements, you can apply special CSS only after cufon has replaced text.

      h1 {
      font-size:2em;
      }

      The way this works, if Cufon fails to apply itself then your default css for the item h1 should get 2em size.

      If Cufon succeeds, then you can make a rule like

      .cufon-active h1 { /* for Cufon.replace(‘h1’) */
      font-size: 3em;
      }

      so the cufon-rendered font is bigger.

    • User Avatar
      Dennis
      Permalink to comment#

      yeah, don’t use that crap! Use web fonts instead, it’s just text.. jesus people go out of their way to screw up the internet! You can do worse than cufon though.. USE FLASH!

    • User Avatar
      jason
      Permalink to comment#

      Don’t like

    • User Avatar
      Dave

      @Dennis “yeah, don’t use that crap! Use web fonts instead, it’s just text..”

      Sometimes web fonts just don’t cut it. Sometimes you need Avenir or Gill Sans and cheap web knockoffs won’t do.

  2. User Avatar
    Hugo

    Is there any code or hack to skip the effect of preloading for cufon ?

  3. User Avatar
    wdalhaj

    Cufon don’t support Arabic..

    sure we’ll find solution..:-)

  4. User Avatar
    Mike

    @deane

    I would load cufon normally and then have a normal stylesheet with text the size you want it. Then I would have javascript load in another stylesheet that overrides the first stylesheet and has the font sizes you need when using cufon. That way, if javascript is disabled, they don’t load cufon or the stylesheet associated with it. they just load the normal stylesheet. However, if javascript is enabled, it will load the styles that override the normal styles and allow for the correct cufon font styles.

  5. User Avatar
    Mike

    Here’s an example:
    <code&rt;
    <script&rt;
     var file = document.createElement(‘script’);
     file.setAttribute(“type”,”text/css”);
     file.setAttribute(“src”,theFile.ext)
    </script&rt;
    </code&rt;

  6. User Avatar
    Meisha
    Permalink to comment#

    Any way to get Cufin to load the replacement fonts without first flashing the un-replaced font in IE? I’m using Cufon, and it looks great in FireFox, but it’s unacceptable in IE because the page loads the “ugly” version first before Cufon kicks in with the pretty fonts. Does anyone know of a font replacement method that doesn’t do this? Thanks!

  7. User Avatar
    Meisha
    Permalink to comment#

    Sorry, I meant Cufon not Cufin @~@

  8. User Avatar
    Mike

    It’s not the best idea, but there are flash font replacements…

  9. User Avatar
    heena
    Permalink to comment#

    Hi,

    cufon is not working for Arabic character.
    could you please help me for this issue.

    Thanks

  10. User Avatar
    Zamshed Farhan
    Permalink to comment#

    In a wordpress template I have seen a HTML tag as . What does it mean?

  11. User Avatar
    Jonathan Muth
    Permalink to comment#

    @heena and @wdalhaj

    I wrote a blog post about the The State of Arabic Webfonts it might prove helpful for what you are trying to accomplish. Cufon does not yet full support Arabic script.

  12. User Avatar
    thomas
    Permalink to comment#

    works great with .html files but does anyone know how to place the script so it’s working with a .hta file?
    it ain’t gonna work by simply renaming the file.
    best regards
    thomas

  13. User Avatar
    Jackson Back
    Permalink to comment#

    Relative units of a font-size inflicts different vizualization. almost every browser renders the same view when is the size of font defined by points (pt). font size problem can be solved with exceptions for particular browser or a graphical interface.

    Tip: large x-height, making it readable at all sizes.

    IE9: register font requires special technique.

  14. User Avatar
    Rob Wu
    Permalink to comment#

    Hi all,

    Is there a way to ‘recolor’ a cufon font based on the the stylesheet switch?
    I have the ‘recoloring’ of the site working fine, but the cufon fonts are not affected by the stylesheet switch.
    I tried several little trciks, but the cufon font is unwilling to change color.

    For the recolor option think black text on white vs. white text on black.

    thanks for any tips,

    rob

  15. User Avatar
    Sam
    Permalink to comment#

    So frustrated, please help me. I use all in one cufon plugin and generally all is well. HOWEVER, wwhen I want to change text that has more than one aspect (e.g. I want to change my h3 sidebar text) I can’t do it! I can change the sidebar text, and I can change all the h3 text but not narrow it down to the h3 sidebar text. Here are things I’ve tried. Please help:

    Cufon.set( ‘fontFamily’, ‘Hominis’).replace(h3 , ‘.sidebar’);
    Cufon.set( ‘fontFamily’, ‘Hominis’).replace(‘#h3′.sidebar’);
    Cufon.set( ‘fontFamily’, ‘Hominis’).replace (‘.sidebar.h3’);

  16. User Avatar
    Chuck Spidell
    Permalink to comment#

    Sam, try:
    Cufon.set( ‘fontFamily’, ‘Hominis’).replace (‘.sidebar h3′);

  17. User Avatar
    Jaison
    Permalink to comment#

    How can we add a :hover color change for cufon?

  18. User Avatar
    Jason
    Permalink to comment#

    Hi,

    Im having some trouble in my drop down i set the cufon in this way

    Cufon.replace(‘#nav ul li’, {hover: {color: ‘#ffffff’}, fontSize: ’15px’, color: ‘#c64e07’});

    but the problem is the code is continue replacing my sub menu what should i do

    im working it in my localhost

    Please Rplay ASAP

    Regads,
    Jason

  19. User Avatar
    Ankur
    Permalink to comment#

    I have a doubt.
    Some Site say using cufon badly effects SEO as search engine are not able to search that text. Is that true ?

  20. User Avatar
    Paul
    Permalink to comment#

    .cufon-loading { visibility: hidden; }

    The above CSS will hide the plain-text that cufon is replacing before cufon loads.

    The solution is fairly well known now, but I figured I’d add it here too.

  21. User Avatar
    Sam
    Permalink to comment#

    @Ankur – not: incorrect. It has a normal affect on SEO, normal compared to if you had styled the document with H1, H2, H3 tags etc. It a much better effect on SEO (more readily crawl able) than to use images to style headlines, or flash etc.

    If you look at the source code of your document, with cufon enabled, you will see an html document that Google/engines can crawl easily.

    The benefit of this model is that if you device is not enabled to handle Javascript (or preference to use Javascript is turned off) then the HTML document will “gracefully degrade”, meaning it will rely on the tags, without the javascript styling and be equally highly crawlable.

    I hope that makes sense.

  22. User Avatar
    Sam
    Permalink to comment#

    @Deane. Styling fonts by em produces better results.

    We have found a conditional switch in the head of the document for pretty much IE browsers gives us a good way to provide and alternative CSS file.

  23. User Avatar
    Tork
    Permalink to comment#

    Cufon is great!
    It works as ‘it says on the tin’. It is a simple but effective font replacement tool.

    Yes it does not cater for all uses, but then there are others that can. For the simple use, cufon is just the job.

  24. User Avatar
    lionvipul
    Permalink to comment#

    Alternate: Google Web Fonts : http://www.google.com/webfonts

  25. User Avatar
    Angie
    Permalink to comment#

    Hey Everybody! I’m totally a WordPress gal but occasionally do styling on blogger blogs. Have tried and failed after following these and several other online instructions to use cufon for custom “non-google” fonts on Blogger. No luck. Does anyone have any experience with this? Much thanks!

  26. User Avatar
    lore
    Permalink to comment#

    It worked for me, Angie.
    – Enqueue the scripts in functions.php.
    – Add the #3 javascript (above) somewhere later in the page – I added that in the footer.
    It works fine in WordPress, so maybe something funny happened when you ran the generator. Anyway I deleted it in the end, because the heights weren’t calculating right & in my case I couldn’t find a workaround that was good enough to make me want to add 33k to my mobile designs. Maybe later.

  27. User Avatar
    Angela Zou
    Permalink to comment#

    I’m using Cufon with some Chinese fonts, and now they are spilling over the container, making it really ugly. Is it possible to have Cufon to do new line breaks when it hits that width? (like normal fonts?)

  28. User Avatar
    zkiwi
    Permalink to comment#

    Thanks for tip! But it not working for me, i don’t understand when i has completed steps as above :(

  29. User Avatar
    siva
    Permalink to comment#

    i wanted to know how to apply external fonts using cufon. pls help me

  30. User Avatar
    Karthik
    Permalink to comment#

    It works nice, however i’m trying to apply fontWeight:’bold’ for a font(it’s an light version) it’s not getting applied. Is there any way to show light version of a font to bolder?

  31. User Avatar
    Leverfile
    Permalink to comment#

    I bought a wordpress theme and I changed some of the font sizes on some titles, and now those titles do not render the cufon font at all in IE9. So the default cufon font sizes work, but any where I updated font size are rendering in Times Roman now. Any ideas as to why that is, and how can I fix it?

  32. User Avatar
    Iestyn Lloyd
    Permalink to comment#

    I’ve recently taken on a site which uses Cufon. Is there an easy way of getting rid of it? It’s been embedded in a WordPress site — cwmnida.tv

    Having no previous experience with this i just don’t want to stuff it up

  33. User Avatar
    Bryan
    Permalink to comment#

    This is a much easier and better way to replace the cufon. Especially when working with certain characters. heres the link http://www.fontsquirrel.com/tools/webfont-generator used it alot. works awsome.

  34. User Avatar
    sushmit
    Permalink to comment#

    Line_height property is not working in cufon !!

    Any solution ???

  35. User Avatar
    uras
    Permalink to comment#

    Hello,

    I was using cufon, but now I want my font to be selected by google fonts. However even though I disabled cufon plugin, the font becomes the font that I used to have before using cufon. My style.css file is not working anymore. How can I remove cufon completely from my website?

    Regards

  36. User Avatar
    Farhan Islam
    Permalink to comment#

    Is it possible to use old cufon for some latest fonts and or any how to instructions for creating own cufon font?

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag