In the midst of creating an online store, using the Prestashop e-commerce shopping cart, I ran into a little error while using Cufon (which generates fonts & renders them in the browser with JavaScript). Using Cufon, at it’s very basic level (of replacing text with graphics), was fairly simple to set up in a Prestashop theme. However, when I went to enable the :hover option for a replaced element, with the normal code structure, the e-commerce site would load a blank page.

Normal usage:

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

I struggled with finding a solution to this last night. I tried removing the line breaks around hover:true, adding quotes around different areas, deleting the brackets, but nothing worked. Then, this morning, I decided to google the problem, and within minutes, I found the solution in the Prestashop forums. It was an ah-ha moment, when I found the solution. It was so simple, yet nothing I would have tried on my own…

The Solution: Surround the JavaScript code with {literal} tags.

Like so:

<script type="text/javascript">
{literal}
Cufon.set('fontFamily', 'Vintage');
Cufon.replace('h4');
Cufon.replace('h2 a', {
	hover: true
});
{/literal}
 </script>