Joomla Templates Club 406,261 posts

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#142719

Because there are only a handfull of fonts that you know everyone has, Arial, Trebuchet, Vardana, etc. it makes Type styling very limited. Cufón (or Dynamic Text Replacement) allows us to use any font we like, style it with CSS, and use it anywhere on our page. This will really help your site stick out from the crowd.

Over the years I’ve tried several ways of achiving Dynamic Text Replacmet. Most are very tricky to achieve and involve much code hacking. Even when you do get it right it can cause unpredictable layout out problems and more importantly it can really screw up your SEO. Also, many systems were not cross browser compatible. Because of all this I was a bit reluctant to use the one that came included with JA Nickel called Cufón. However… after extensive testing and re-testing I can safely say this is by far the best DTR script I’ve ever seen. Not only is it small, requires no js skills, requires no plugins, is very fast, is styled from your own CSS, and is browser compatible, but Google actually indexes the images created by Cufón AS WORDS! (example here).

So after I discovered all this I wanted to use it on some of my other sites. This tutorial is going to show you how to do the same.

STEP 1: Download the .zip below and extract it to your_joomla_folder/templates/your_template_folder/js/
5957

STEP 2: Go to http://cufon.shoqolate.com/generate/ to create the font javascript file. Here you have the option of creating regular, bold, or italic text. (Note that size and colour of your Cufón fonts will be controlled by CSS and some other things like text-transform: uppercase; but some styles like underline or bold can’t.)

I suggest just using ‘Regular’. Click the browse button and navigate the font you wish to use. Windows users take note… you will not be able to select fonts direct from your Fonts folder. You must copy it from there to a different folder and then select the font from the new location!

Make sure to check the box that says “The EULAs of these fonts allow Web Embedding“. Here you are stating that you are actually allowed by license to display the font on line.

Scroll down the page and tick Uppercase, Lowercase, Numerals, and Punctuation boxes. Leave all other boxes as they are unless you specifically want more than ‘Basic Latin‘ characters. Accept all other settings as default, click the T&C’s box and finally click the ‘Lets do this‘ button.

You will be asked to save a file called “Fontname_400.font.js“. Save this file into your template_name/js/cufon folder that we created in step 1.

STEP 3: Open your templates index.php file and immediately before the </head> tag insert the following code…

<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/cufon/cufon.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/cufon/Fontname_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('.componentheading, .contentheading, h1, h2, h3');

</script>
Make sure to replace the ‘Fontname_400.font.js‘ filename with the font you created in step 2… eg. Arial_400.font.js
Make sure, in the Cufon.replace line, to include all the classes where you want the font to be replaced. You can enter any ID, class, or tag here.

Note: lowercase ‘h’ tags must be used for compatibility with Google Chrome.

To style your Cufón simply adjust your template.css in the exact same way you would for your normal text.

[FONT=Trebuchet MS]STEP 4: [/FONT]Because of the excellent way Cufón is scripted there is no flicker. All Cufón on the page will be displayed at the same time. However there may be a slight delay in some browsers before the Cufón is displayed. To avoid this open your index.php file and immediately before the </body> tag (or before any other scripts that are already there like Google Analytics) place the following line…

<script type="text/javascript"> Cufon.now(); </script>
And that’s it. There may be one or two additions to make here like how to gradient the text but I’m still testing.

---

Attachments:

1. cufon.zip

13 users say Thank You to scotty for this useful post

1. delliana
2. aris
3. minver
4. santoshalom
5. mihirc
6. ibrahimbdawy
7. miguelitox
8. wombat1
9. damian
10. TomC
11. symbic
12. Juniamission
13. synapsis

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#310770

You want to use more than one font? OK read on….

Follow the exact same steps as above and create your second Fontname_400.font.js file. When you download this file open it and you will see near the start something like “font-family”:”Fontname1″. Remember this family name.

Now in the script you entered in the head of your index.php change it to something like this…

<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/cufon/cufon.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/cufon/Fontname1_400.font.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/cufon/Fontname2_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('.componentheading, .contentheading, h1', { fontFamily: 'Fontname1' });
Cufon.replace('h3, h4, h5', { fontFamily: 'Fontname2' });
</script>
Now we can easily control which font is used for which classes and tags.

If anyone has any questions or problems then fire away…..

7 users say Thank You to scotty for this useful post

1. nchaleta
2. mihirc
3. toddman
4. damian
5. minver
6. miguelitox
7. wombat1

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#314533

In step 3 above please change to lowercase tags for compatibility with Google Chrome.

<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/cufon/cufon.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/cufon/Fontname_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('.componentheading, .contentheading, h1, h2, h3');

</script>

2 users say Thank You to scotty for this useful post

1. aris
2. miguelitox

[kalibs112 Friend kalibs112Join date: September 2009Posts: 68Downloads:0Uploads:2 Thanks: 22 Thanked: 3 times in 4 posts]

#320792

Thanx for this…followed all the instructions and although I had some glitch at the beginning, I have now mastered the process and it is working perfect…thanx Scotty

[Balaji Ramanathan Friend Balaji RamanathanJoin date: September 2014Posts: 187Downloads:0Uploads:13 Thanks: 24 Thanked: 2 times in 1 posts]

#322459

Just thought to share this:

If you are not inclined to create your own font .js files – easiest way to edit is to edit the existing .js font file.
your_joomla_folder/templates/your_template_folder/js/

For example, I wanted to remove the hobo font as in Mona template – I went to hobo_Std_50.font file and replaced font family to Calibri (or whatever you want).

1 user says Thank You to Balaji Ramanathan for this useful post

1. miguelitox

[miguelitox Friend miguelitoxJoin date: January 2010Posts: 4Downloads:0Uploads:0 Thanks: 12]

#329907

so my index.php file in the template’s directory doesn’t have any head tags… other folks seem to be doing this and getting it working, so i must be doing something wrong…

my goal is to have the main menu text on the ja_halite template display using the fancy cufon, but i’m at a loss.

any suggestions?

i guess i really should just ask what’s the path to the index.php file you’re talking about

mx

[tjproto Friend tjprotoJoin date: April 2009Posts: 6Downloads:0Uploads:0 Thanked: 3 times in 2 posts]

#331017

I think for other templates its component.php in your template directory. It is for Rasite.

[wombat1 Friend wombat1Join date: March 2010Posts: 117Downloads:0Uploads:1 Thanks: 38 Thanked: 11 times in 1 posts]

#345141

The way Cufon was appearing after the text is already drawn in a native font was so annoying. Step 4 did the trick. So great THANK YOU so much.

<em>@scotty 136427 wrote:</em><blockquote>
[FONT=Trebuchet MS]STEP 4: [/FONT]Because of the excellent way Cufón is scripted there is no flicker. All Cufón on the page will be displayed at the same time. However there may be a slight delay in some browsers before the Cufón is displayed. To avoid this open your index.php file and immediately before the </body> tag (or before any other scripts that are already there like Google Analytics) place the following line…

<script type="text/javascript"> Cufon.now(); </script>
And that’s it. There may be one or two additions to make here like how to gradient the text but I’m still testing.</blockquote>

[dontregartha Friend dontregarthaJoin date: September 2009Posts: 22Downloads:4Uploads:1 Thanks: 4 Thanked: 2 times in 1 posts]

#350312

Hi all

I have implemented the following code with success on various website where the index.php has head tags contained.

<script rel=”stylesheet” src=”<?php echo $tmplTools->templateurl(); ?>/js/cufon.js” type=”text/javascript”></script>
<script type=”text/javascript” src=”<?php echo $tmpTools->templateurl(); ?>/js/mistral_400.font.js”></script>

<script type=”text/javascript”>Cufon.replace(‘p’, { fontFamily: ‘mistral’ });</script>

I am using Ores for a new site. Ores does not have a head tag in the index.php but instead this is featured in the component.php file. I have put the exact same code into the component file but had no luck getting the cufon to kick in.

Can anyone have any idea why this would not be working?

many thanks

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#350323

Hi, as Ores is constructed with the T3 framework you would need to edit templates/JA_ores/layouts/blocks/head.php.

Components.php is a jooma core file and should not be edited.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#360500

<em>@scotty 187059 wrote:</em><blockquote>Hi, as Ores is constructed with the T3 framework you would need to edit templates/JA_ores/layouts/blocks/head.php.

Components.php is a jooma core file and should not be edited.</blockquote>
So, for T3 templates, you enter the script and cufon coding in the head.php file as opposed to the index.php file ??

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#360522

<em>@scotty 136427 wrote:</em><blockquote>
STEP 2: Go to http://cufon.shoqolate.com/generate/ to create the font javascript file. Here you have the option of creating regular, bold, or italic text. (Note that size and colour of your Cufón fonts will be controlled by CSS and some other things like text-transform: uppercase; but some styles like underline or bold can’t.)
</blockquote>

QUESTION:
When you say “controlled by CSS,” do you mean u can create new CSS rules that will separate the new style from other CSS styling (especially the way the JA Developers seem to “slave” and entangle various stylings amongst multiple css files)?

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#360568

<em>@tcraw1010 200449 wrote:</em><blockquote>So, for T3 templates, you enter the script and cufon coding in the head.php file as opposed to the index.php file ??</blockquote>
Correct.

<em>@tcraw1010 200477 wrote:</em><blockquote>QUESTION:
When you say “controlled by CSS,” do you mean u can create new CSS rules that will separate the new style from other CSS styling (especially the way the JA Developers seem to “slave” and entangle various stylings amongst multiple css files)?</blockquote>

When you include the script in the head you tell it what tags to apply to, H1, H2, .myclass, etc. The current CSS rules for these will apply to the cufon text or you can make new ones.

1 user says Thank You to scotty for this useful post

1. TomC

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#360570

Please Note: Cufón is no longer required to create non ‘web safe’ text as all browsers now support the @font-face style allowing you to use any font you wish (with the necessary license of course!).

Good article on the topic here… http://www.miltonbayer.com/font-face/

The new T3 framework has parameters for the Google Font API built in. You will find them under the ‘Profiles’ tab in your Template Manager.

1 user says Thank You to scotty for this useful post

1. TomC

[Juniamission Friend JuniamissionJoin date: October 2005Posts: 60Downloads:0Uploads:0 Thanks: 12]

#369523

Thanks for all the help in this thread…:)

[Author]

Posts