Cufon Line Height Problem

By Avinash

October 02, 2012Tips & Tricks2 Comments

Today I am in discussion with one of the designer we have and we have found one strange thing about Cufon fonts. If you are not sure what cufon is, then I would recommended you to have read this article about cufon fonts.

Problem

Problem is with line-height CSS attribute. Line height works perfectly but not when we apply Cufon fonts to that element.

For first few mins we thought it might a problem with some other CSS property. But it was not like that. In just 4 minutes I have found that cufon has known but about line-height (in all browsers) and that no suppose to get fixed.

Actual problem is with non-strict doctypes pages. So if you have a strict doctype defined then you might have not face the same problem but it will create a problem for all non-strict DocTypes.

So if you have this problem then you must have DocType like below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Solution

So as a solution you need to change that DocType to below one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Demo

Live Demo with Problem

Live Demo with Solution

Share This Article

  • http://webomnizz.com/blog webomnizz

    if we talking about the SEO part of the website then i don’t think so that cufon fonts are good for the website, because these fonts are not crawled by google spider, Google fonts are the best alternative in place of cufon fonts. Google Spider easily crawled and don’t take much time to load..

    • therichrockster

      You *do* know something about SEO right? Cufon is fine because it is not a textual replacement like sIFr was. If you view the source code of any cufon text, you will see normal HTML – this is what the spider sees.

      I’ve done sites with entirely Cufon replacement, and they are top of the list for their target markets.

      sIFr (Scalable Inman Flash Replacement) was the precursor to Cufon, and used Flash which was a nightmare for SEO. Cufon, in moderation or with it’s limited character sets can load just as quickly. Google fonts are simply a more advance version of Cufon – it’s stil a text layer replacement technology and has no impact on SEO.