Adding Cufon Fonts in YJSG Templates

I figured out how to add a Cufon font. The steps are inserted below.

George

1. Go to: cufon.shoqolate.com/generate/

Create and download a Cufon font JavaScript file. The file will be named similar to this:

futura_700.font.js

Follow the directions on the page, it works.

Note that a font file may not (in some cases) be uploaded directly from the Windows Font folder. Copy the file out of the Windows Font folder and you will be OK to upload.

2. Upload the JavaScript file to the Template folder. I am using YouGrids.

templates / yougrids / src / cufon

You will see other Cufon Font JavaScript files in the folder.

3. In the base template directory, find the templateDetails.xml file. (In this example, the file is found in the yougrids folder.) Open the file for editing. Add the font name to the Cufon Font Family selection list. Use item 11. There are 10 Cufon fonts by default. See below. I added Futura Md. Save the file.

<field name="cufon_font_family" type="yjsglist" default="1" label="CU_FONT_FAM_LABEL" description="CU_FONT_FAM_DESC">
<option value="1">Museo</option>
<option value="2">Andika</option>
<option value="3">CABND</option>
<option value="4">Junction</option>
<option value="5">League Gothic</option>
<option value="6">Tallys</option>
<option value="7">Chunk</option>
<option value="8">Fertigo</option>
<option value="9">Delicious</option>
<option value="10">Molengo</option>
<option value="11">Futura Md</option>
</field>

4. In template yjsgcore folder, find the yjsg_cufonfonts.php file, and open it for editing. Add the font to the list in the same format. Case 10 is a default, I added case 11. Save the file.

case 10:
$cufon_get_file = "Diavlo_500.font.js";
$cufon_get_family="Diavlo";
break;
case 11:
$cufon_get_file = "futura_700.font.js";
$cufon_get_family="Futura Md";
break;

Note that the “get_file” file name must exactly match the name of the uploaded JavaScript file. Additionally, the “get_family” name must exactly match the font family. The font family name is found inside the JavaScript file. Open the Javascript file with NotePad to see the font family name. It is near the top. You are not editing the Javascript, just open, get the font family name, and exit without saving. Here’s a sample:

Cufon.registerFont({"w":196,"face":{"font-family":"Futura Md","font-weight":500,"font-stretch":"normal","units-per-em":"360", ……

5. Go to the Joomla Template Manager, select Cufon Font and then select the newly added font. Go to the site and you should see it.