Grow your CSS skills. Land your dream job.

Last updated on:

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. 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.

    • 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.

    • 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!

    • jason
      Permalink to comment#

      Don’t like

    • 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. Is there any code or hack to skip the effect of preloading for cufon ?

  3. Cufon don’t support Arabic..

    sure we’ll find solution..:-)

  4. @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. 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. 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. Meisha
    Permalink to comment#

    Sorry, I meant Cufon not Cufin @~@

  8. Mike

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

  9. heena
    Permalink to comment#

    Hi,

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

    Thanks

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

  11. @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. 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. 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. 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. 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. Sam, try:
    Cufon.set( ‘fontFamily’, ‘Hominis’).replace (‘.sidebar h3′);

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

  18. 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. 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. 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. 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. 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. 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. Alternate: Google Web Fonts : http://www.google.com/webfonts

  25. 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. 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. 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. Permalink to comment#

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

  29. siva
    Permalink to comment#

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

  30. 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. 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. 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. 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. sushmit
    Permalink to comment#

    Line_height property is not working in cufon !!

    Any solution ???

  35. 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. 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?

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".