Joomla Web Development

The method of editing Cufon generated fonts in Joomla

Rushik Shah User Icon By: Rushik Shah


It is highly likely that you haven’t come across the term Cufon as yet. It is mainly to do with website design and thus it is possible that even if you are in the field of web development india but not a web designer you haven’t heard of it. So to cut to the chase; cufon is a text replacement tool. To be more specific cufon is a font replacement tool. The chief use of cufon is to use fonts that are not safe to use on the web and places where you do not want to use an image.

Although this may sound like a new concept, font replacement is far from new. The advantage being that cufon is javascript based compared to sIFR which is flash based thus facing restrictions on Apple devices.

Cufon in general is a great solution for headings where you require fancy text but do not wish to create an image. Thus by using cufon font replacement tool it is possible to transform your headings and other fonts with ease.

The following steps will show you how to change the Cufon generated fonts in Joomla.

  • To start with locate the .ttf file. This the extention of your font file.
  • In the first selection you will have the regular typeface field where you will pick your font from your list of .ttf files
  • Make sure to check the EULA box at the bottom of this section.
  • Place the characters in the next section.
  • You will now need to acknowledge and accept the terms and conditions and press the ‘Let’s do this’ button to download the cufon font.
  • You will need to access the file system of your Joomla website. This can be done either via FTP or via the web server control panel.
  • Place this font in your template folder in the scripts directory.
  • Edit this new font file in any text editor and make a note of the font family.
  • Now load the file ‘cufon-replace.js’ which is also located in your scripts directory and replace the font family with the one you have in the new font file.
  • You will now need to edit the file ‘index.php’ which is located in your templates directory. This index file contains links to the cufon files which need to be replaced with the value of the new cufon font file. The link may look something like mentioned below:

<script type=”text/javascript” src=”<?php echo $path ?>/scripts/<fontname.font.js”></script>

It is likely that you are already aware of readymade templates being used in open source software like Joomla. However just in case you are not that IT savvy here is a short explanation to get you upto speed. Joomla is an open source software which is also free to download. You can set it up using a the simple and user friendly interface that it provides. Once done you will need to change the template as per your requirements. You will need to get a custom template prepared by a professional Joomla web developer like Alakamlak. The other option that you do have is to download a readymade template from the selections of templates that are available online. These templates are usually generic and may not contain all the functionality that you require.

At times the Joomla web developers have the tough ask of developing complicated templates that require a combination of many items. The same applies to readymade templates as well. In such cases cufon fonts are made use of, which is why it is so important to aware about them while making your own website.

The small tips regarding cufon fonts provided in this article are bound to come in handy at some stage of development or maintenance of your website.


  • How to edit the Cufon generated fonts in Joomla
  • The method of editing Cufon generated fonts in Joomla

What’s Next ?

I know after reading such an interesting article you will be waiting for more. Here are the best opportunities waiting for you.

Share via
Copy link
Powered by Social Snap