JavaScript for Cufón and the Cufón font
1. Include the<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;
}
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.
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.
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!
Don’t like
@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.
Is there any code or hack to skip the effect of preloading for cufon ?
Just add:
.cufon-loading { visibility: hidden; }
Cufon don’t support Arabic..
sure we’ll find solution..:-)
any luck with arabic enabled solution??
we can have biffon for persian or i think arabic fonts,
even for rtl languages:http://averta.net/labs/fa/?p=10
@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.
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;
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!
check out Cufon.now() in the documentation and #5 in the FAQ.
i usually set the element to display:none in the CSS, set text for element (usually via AJAX), cufon the element, and THEN .show() the element using jQuery.
i used it on a travel agency site’s home page to style dynamic text on a feature rotator and specials (http://shipsandtripstravel.com).
i also used it with multiple fonts on their testimonials page (http://shipsandtripstravel.com/about/testimonials.html)
Sorry, I meant Cufon not Cufin @[email protected]
It’s not the best idea, but there are flash font replacements…
test
Hi,
cufon is not working for Arabic character.
could you please help me for this issue.
Thanks
In a wordpress template I have seen a HTML tag as . What does it mean?
@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.
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
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.
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
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’);
Sam, try:
Cufon.set( ‘fontFamily’, ‘Hominis’).replace (‘.sidebar h3′);
How can we add a :hover color change for cufon?
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
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 ?
.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.
@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.
@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.
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.
Alternate: Google Web Fonts : http://www.google.com/webfonts
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!
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.
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?)
Thanks for tip! But it not working for me, i don’t understand when i has completed steps as above :(
i wanted to know how to apply external fonts using cufon. pls help me
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?
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?
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
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.
Line_height property is not working in cufon !!
Any solution ???
RTFM !
line-height works fine if you have strict doctype.
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
Is it possible to use old cufon for some latest fonts and or any how to instructions for creating own cufon font?