KC Cufón Font Replacement
Note: this site is using KC Cufón plugin to use custom fonts for the h1 and h2 tags.
We strongly suggest that you use an alternative method to display your fancy fonts as the Cufón software has not been updated in many years. We no longer provide support for this out-dated font replacement method. Using @font-face or Google font is a much better solution now.
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.
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.0.0 Beta - Initial Beta release
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.
PHP 5.0 or higher
Follow these instructions to install the plugin for the first time or to upgrade to a new version of the plugin.
- Login to the backend of your Joomla! site as an Administrator or Super Administrator
- Under the Extensions menu go to Install/Uninstall
- Click the Browse button in the Upload Package File box
- Find the plugin_kc_cufon x.x.x.zip file that you previously stored on your hard drive and click Open
- Click the Upload & Install button beside the Browse button
- The plugin will be installed
- Under the Extensions menu go to Plugin Manager
- Find the plugin_kc_cufon plugin and enable it, change Enabled: to Yes
- If you have a Google Analytics plugin installed position it after the kc_cufon plugin in the Plugin Manager list.
- 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.
- 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.
- 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.
- Upload the font files to /plugins/system/kc_cufon/fonts folder.
- Then set the plugin parameters to use the font files and specify which selectors are to use those font files.
- You can set your CSS selectors for the fonts as you normally would using your normal CSS stylesheets.
- 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.
- Detail information and documentation about Cufón can be found at the Cufón site.
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.
- Make sure that you have the Cufón plugin enabled.
- 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.
- 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.
- 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.
- 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 the list of supported browsers.
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)