Home > Typography > KC Cufón Font Replacement

KC Cufón Font Replacement

Cufón font replacement plugin

Version: 2.3.2
Joomla! 2.5 Native Joomla! 3.0 Native
Joomla! Plugin Plugin
Version: 1.5.0
Joomla! 1.5 Native
Joomla! Plugin Plugin

 

There are a number of different solutions to display non-web based fonts on a website. Cufón is a JavaScript based solution that requires no flash or images. We have created a plugin that uses Cufón to display your fancy fonts.

Note: this site is using KC Cufón plugin to use custom fonts for the h1 and h2 tags.

Description

Cufón is a JavaScript alternative to the flash based sIFR method or image based FLIR method of replacing your web-based font with any font you have a TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) or PostScript font file for. (Please ensure that the font you use does not violate EULA and copyrights due to fonts being embedded in the website.)

The h1 & componentheading and h2 & contentheading CSS selectors are using Cufón on this website. The plugin will allow you to have up to six different fonts for different CSS selectors sets.

Change Log - Joomla! 2.5-3.x Version

2.3.2 - fixed strict standard warnings
2.3.1 - changed error handling for Joomla 3.x compatibility
2.3.0 - Joomla! 3.0 compatible
2.2.0 Beta - Feature additions:hoverable tags, text shadow and linear gradient, fixed problems with local host, window servers & non-root Joomla installations
2.1.0 Beta - Joomla! 1.6 Update functionality added, updated Cufón Javascript file to 1.09i, added 2 more font selector files
2.0.0 Beta - Initial Beta release

Change Log - Joomla! 1.5 Version

1.5.0 - Feature additions:hoverable tags, text shadow and linear gradient, fixed problems with local host, window servers & non-root Joomla installations
1.4.0 - Upgraded to version 1.09i of Cufon Javscript file, add option to force Mootools to be loaded before the plugin, added 2 more font files for a total of 8 fonts
1.3.0 - Spanish language file added, removed a large font file so plugin would install on smaller hosting accounts
1.2.0 - Added the ability to have 6 fonts/selectors sets.
1.1.1 - Use DS for file delimiter and updated the documentation
1.1.0 - Added 1 more font/selector set for a total of 4 sets and documentation updated.

Requirements

PHP 5.0 or higher

Installation/Upgrading

Installation & Upgrade Instructions

Follow these instructions to install the plugin for the first time or to upgrade to a new version of the plugin.

  1. Login to the backend of your Joomla! site as an Administrator or Super Administrator
  2. Under the Extensions menu go to Install/Uninstall
  3. Click the Browse button in the Upload Package File box
  4. Find the plugin_kc_cufon x.x.x.zip file that you previously stored on your hard drive and click Open
  5. Click the Upload & Install button beside the Browse button
  6. The plugin will be installed
  7. Under the Extensions menu go to Plugin Manager
  8. Find the plugin_kc_cufon plugin and enable it, change Enabled: to Yes
  9. If you have a Google Analytics plugin installed position it after the kc_cufon plugin in the Plugin Manager list.

Usage

Usage Instructions
  1. Before changing the font files, make sure that Cufón is working with the default fonts. So, make sure the plugin is Enabled and the Number of Different Fonts is set to 2.
  2. Go to the frontend of your site and refresh it. You should now see your h1 and h2 tags in the Cufón fonts. If the Cufón fonts are showing continue on with the Usage Instructions, if they aren't you need to get this working before continuing, refer to the FAQ section.
  3. To use the plugin you just need to create your Cufón font file(s). Visit the Cufón generator to create your Cufón font file.
  4. Upload the font files to /plugins/system/kc_cufon/fonts folder.
  5. Then set the plugin parameters to use the font files and specify which selectors are to use those font files.
  6. You can set your CSS selectors for the fonts as you normally would using your normal CSS stylesheets.
  7. You must use a Strict doctype in order for Cufón to work in IE browsers. All Cufón-enabled pages must be UTF-8 encoded. Compatible encodings, such as US-ASCII, are also fine.
  8. Detail information and documentation about Cufón can be found at the Cufón site.

Download

Downloading the Plugin

The KC Cufón Font Replacement plugin is released under the GNU GPL license, please read and agree to these terms before downloading the software.

Download the Joomla! 1.5 plugin file.
Download the Joomla! 2.5-3.x plugin file

FAQ

Troubleshooting

  1. Make sure that you have the Cufón plugin enabled.
  2. Did you change the 'Number of Different Fonts' pulldown menu item in the plugin Parameters to reflect the number of font/CSS selector sets you are using.
  3. Ensure that you have Mootools or another JavaScript framework enabled like JQuery (they need to be loaded before the Cufón plugin is loaded). If you are using Mootools, set the Load Mootools parameter to Yes to ensure that Mootools is loaded before the Cufón plugin.
  4. When you created the font file, did you limit the domains that the font file would work on? If so, did you include the current domain you are trying to get Cufón to work on. Make sure that you have the www version of the domain as well as the non www version in the list of allowed domains.
  5. Have you made sure that you are using a Strict doctype and that all cufón-enabled pages are UTF-8 encoded. Compatible encodings, such as US-ASCII, are also fine. Quirks mode isn’t supported but might also work in some cases.
  6. Running Cufón on a localhost does not work in most cases, you have to use it on a web hosting environment.

Read about known bugs and issues of Cufón.

Find detailed information on Cufón styling. To apply special styling to Cufón-enabled elements use:
.cufon-active <CSS selector>

You can use any CSS selector to specify what text should be replaced. For example you could use: p.readmore which would change all paragraphs that have a class of readmore. If you want the links to also be changed to the Cufón font, then set the parameter: 'Set the selectors for font 1 links to be hoverable.' to Yes, for that Font/Selector group. If you wanted all of your h1 tags and the text in your header to be changed to a Cufón font and assuming that the header is wrapped in a div tag with an id of header you would use: h1,#header for your CSS selector.

You just need to specify the CSS selector that uniquely identifies your menu items. For example, if you wanted your top nav menu to use a Cufón font and it was wrapped in a div tag with an id of topnav, then your CSS selector would be #topnav. Be sure to set the parameter 'Set the selectors for font 1 links to be hoverable.' to Yes for this selector.

Text shadows are specified using normal CSS format. See: http://www.w3.org/Style/Examples/007/text-shadow.en.html. In the plugin parameters text input box for text shadow you would enter what comes after the 'text-shadow:' part of the definition. For example:

-1px 0 black, 0 1px black

Color linear gradients are specifed with the starting color going to an ending color. The simples would be to specify 2 colors, but you can get more complex and specify multiple colors and strengths. In the plugin parameters text input box for Linear Gradient you would enter for example:

red, 0.2=#fff, 0.8=#23d559, rgb(0, 0, 0)

Suport

Support

Please use our Support Forum to request help or report a bug.

Joomla! Web Hosts

These are our recommended web hosting providers for Joomla! websites. These are hosts that we use for website that we build. All have an excellent reputation, fast servers and most importantly awesome service! They all have technicians that are familiar with Joomla!

Liquid Web Shared and Fully Managed VPS and Dedicated Web Hosting

Rochen Joomla Shared or Managed VPS Web Hosting

WiredTree Fully Managed VPS and Dedicated Web Hosting

HostGator Shared and Fully Managed VPS and Dedicated Web Hosting

Joomla! Login

PHP - MySQL - Apache - W3 Valid