Custom typography in Magento – Cufón
Are you sick and tired of boring, old web-safe fonts? For some time now, there are a couple of really quality solutions for their replacement. I believe Cufón is one of the most popular. This article will help you learn how to implement it in your Magento online store.
Follow these steps (and you might find white rabbit):
- Choose the font you want to use. Make sure the EULAs of these fonts allow Web Embedding.
- Go to Cufón website , upload you font, let the Cufón do its magic and download your .font.js file.
- While you’re there, download cufon-yui.js , you’ll need it too.
- Place downloaded files in js/cufon/ folder on your server.
- Open page.xml file of your theme and place this code inside your head section
<action method="addJs"><script>cufon/cufon-yui.js</script></action> <action method="addJs"><script>cufon/YourFontFile.font.js</script></action> - Open head.phtml file of your theme and place this code right before the end of it.
<script type="text/javascript">Cufon.replace('h1, h2');</script>Notice that this code will replace text inside h1 and h2 tags with custom font. You can target specific classes too if you need it, like this:
<script type="text/javascript"> Cufon.replace(' .product-title, .price '); </script> - Enjoy your custom typography!!
42 comments
problem solved, thanks
embed problem , the fonts I need for my logo cannot be embedded and much probably they do not have commercial version with this capability.
I´ve seen a couple of sites that employ .woff , .ttf , .otf fonts , all font files stored at a folder on their server.
how exactly to do this I do not know.
Disregard my previous message seems to be working great. I had missed some code and now its working.
No luck working on firefox any comments I added all related code.
Hey, I found your article very usefull for cufons I have installed on a magento site, so thanks for that. One question I do have though… so far I have used the cufon for MSGILLS font which is fine, however I now need to add another font along side this ‘Perpetua’, Do you know how I would go about doing this yet using two different fonts at the same time?
Thanks again
All the major browsers have decided to go their own way with font formats that they choose to support. The following types would need to be stored on the server for use with @font-face.
Internet Explorer only supports EOT
Mozilla browsers support OTF and TTF
Safari and Opera support OTF, TTF and SVG
Chrome supports TTF and SVG.
Further, mobile browsers like Safari on the iPad and iPhone require SVG. So the full CSS for using @font-face would look something like the following.
@font-face {
font-family: ‘YourFont;
src: url(‘YourFont.eot);
src: local(‚ò?’),
url(‘YourFont.woff’) format(‘woff’),
url(‘YourFont.ttf’) format(‘truetype’),
url(‘YourFont.svg#webfont’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
@Emil: Use proper web fonts via @font-face – much better solution all round.
Hi, I use Magento 1.5 and I live in Norway. The cufon can not read Norwegian alphabet like “Æ,Ø”.
Any suggestion how can I solve this problem?
I found a solution to not working cufon on home page, the problem is
getIsHomePage()):?>
on header.phtml
just delete if statement
Regina Jackson, Riz:
I have the same problem, any solution?
Hi!
Our e-commerce partner has restricted our access to the server. We do not have access to the root. I therefore wonder if it is necessary to place the cufon directory in the root /js directory or could I place it in my theme´s js directory?
Its working grt on all the pages except home page, couldn’t figure it out why its not working on the home page. Please help me !
does not work lightbox.
necessary prototype library, but it is connected.
In the first reports said that connecting cufonxxx.jc not required, but if not displayed characters
Hello,
I have completed everything here and the cufon works great on all pages except the home page. I get a protype.js error and cufon undefined?
any body else have this problem.
LOVE IT!!! Thanks! …subscribing to rss…
its working for me dev.menuforlife.com/index.php/
but on index page not working on all other pages are working
please check
thanks
@priyanka
I can’t tell you much from the code you provided since WordPress stripped your HTML tags, but from what I can see you didn’t place cufon script call at the very end of head.phtml file.
If you read my post and the comments one more time, you will see that I mentioned it more than once.
@Hrvoje – I have added the cufon in page.xml like this:
prototype/prototype.js
mage/translate.js
lib/ccard.js
prototype/validation.js
varien/js.js
css/styles.css
skin_csscss/styles-ie.csslt IE 8
css/widgets.css
css/print.cssmedia=”print”
jslib/ds-sleight.jslt IE 7
skin_jsjs/ie6.jslt IE 7
cufon/cufon-yui.js
cufon/Futura_Md_BT_400-Futura_Md_BT_700-Futura_Md_BT_italic_700.font.js
and I have included the script at the end of head.phtml.
[ like this :
getTitle() ?>
<meta http-equiv="Content-Type" content="getContentType() ?>” />
<meta name="description" content="getDescription()) ?>” />
<meta name="keywords" content="getKeywords()) ?>” />
<meta name="robots" content="getRobots()) ?>” />
<link rel="icon" href="getSkinUrl(‘favicon.ico’) ?>” type=”image/x-icon” />
<link rel="shortcut icon" href="getSkinUrl(‘favicon.ico’) ?>” type=”image/x-icon” />
//<![CDATA[
var BLANK_URL = 'helper(‘core/js’)->getJsUrl(‘blank.html’) ?>’;
var BLANK_IMG = ‘helper(‘core/js’)->getJsUrl(‘spacer.gif’) ?>’;
//]]>
Cufon.replace(‘h1, h2’);
Cufon.replace(‘#nav a’,{hover: true}) ;
getCssJsHtml() ?>
getChildHtml() ?>
helper(‘core/js’)->getTranslatorScript() ?>
getIncludes() ?>
]
but still its not working and an error is coming in FF
“Cufon is not defined
[Break on this error] Cufon.replace(‘h1, h2’); ”
Please help…
Thank you.
lol, its took a while but the whole Magento package is starting to all make sense now, am glad too cos its an awesome piece of software once you get your head around it all lol!
haha that cartoon hits the nail square on the head haha 😀
Couldn’t find page.xml? 😀 Sounds familiar…
https://inchoo.net/life-at-inchoo/the-inchooers-comic-series/
All working fine now 🙂
Couldnt find page.xml (not sure if this is because I am using the latest version of Magento) but put the files in my head.phtml file and works fine!
Had a minor problem with it not finding the .js files but fixed the paths in head.phtml and Viola!
Yeah yeah.. 🙂 my bad.
Just as I wrote it 🙂
Glad you sorted it out!
Disregard I got it..
The header.phtml info needed to go literally right at the very bottom.
Thanks!
Bummer. Tried this without luck.
Doesnt seem to work. Any ideas?
@Hrvoje-
Thanks a lot for reply!!!
will follow the things you have mentioned…and let you know.
Thank you.
priyanka,
Prototype is a javascript library, similar to jQuery. This tutorial is written for Magento, and since Magento uses Prototype and Scriptacoulus, there’s no need to include an extra javascript library.
You just have to make sure to include Cufon script at the end of head section – meaning – AFTER you already included prototype, scriptacolous or any other library.
@Hrvoje – can you please guide me which prototypes need to use, I mean I am not aware of prototypes or is there any link where I can get the needful..?
Please help.
Thank you.
@Hrvoje – exactly the answer I was looking for, thanks mate 🙂
No need for jQuery. Cufón automatically detects few popular javascript libraries, such as jQuery, Mootools and, what’s important Prototype. Since Magento is using prototype, just make sure you include Prototype before you include Cufon, and all should be working fine.
and generally we use jQuery in wordpress and normal html.
ohhh okay…
as per above tutorial, they didn’t mention to add jQuery, but its not working so I added it. but still m facing the tht problem.
Nah I meant generally as there is nothing above to say that you need to call jQuery to make it work?
I guess so…coz I have uploaded jquery.min.js also.
its not working in Mozilla and IE, and working in Safari, Chrome, Opera.
Please give me some solution…please.
Thanks.
no, its magneto core problem i think
Im guessing this needs jQuery to run??
Its not working , please guide us
Hey, I used the same method,
its working in Chrome, Opera, Safari…but not working in Mozilla Fire Fox and IE7.
Please help me to solve this issue.
It’s better if you use Google Fonts
I’m using @font-face now and haven’t had any complaints about bad rendering. JS solutions have had their time in my opinion.
Well, @font-face was planned for some of upcoming articles 🙂
@font-face is, in my opinion, better solution, BUT, some of the fonts have ugly rendering in some browsers, or on some platforms: in that case, a man could go with cufon.
Cufón was great about a year ago, but we’re at a place on the web where I believe using @font-face is well enough supported across platforms to make using a script for font replacement obsolete.
Paul Irish has a great write-up on using @font-face robustly, and though it’s a little more complicated than it should be right now, it’s the present and the future of web fonts: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/