Underlining Links with Cufon

If you aren’t familiar with Cufon then it’s a method of adding real fonts on your web site via Canvas and VML – no Flash or images are required which makes this a beautiful font replacement option for your web site.

If you are looking to simply add Cufon to your web site then get your original font ready and head over to Cufon to generate your font ready for use on your web.

However if like us you have come accross some of the limitations of Cufon then this could be the place for you:-

Underlining Cufon Links

Whilst Cufon is great(we think it’s the best way currently on the web to add non ‘web-safe’ fonts to your site) it does have its limitations and most of these revolve around links.

Cufon doesn’t currently underline links out of the box, but we have a very simple work-around for you to achieve this with pure CSS. Simply add the following markup to your CSS:-

.your-div a .cufon {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FF0000;
.your-div a:hover .cufon {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;

Note that unlike normal links you have to define the link ‘a’ before the cufon and this is because of the way Cufon renders the text by adding the link around the Cufon.

What you will find is that this underlines the cufon link with a bottom border (on which you can also change the hover colour), but it doesn’t change the font link colour itself. To do this we just add some standard CSS like so:-

.your-div a{
	color: #FF0000!important;
}.your-div a:hover{
	color: #000000!important;
[Our example targets a specific div, but you could drop the .your-div if you wanted a universal styled for Cufon links.]

And there you have it. Cufon links underlined and coloured on hover.

Your comments are welcomed!

About the Author
Underlining Links with Cufon Underlining Links with Cufon 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g


A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.