Not so long ago, if you wanted to display nice thick crispy fonts on your site you had to create images of your text.
Then appeared nice solutions such as sIFR, facelift or other image replacement techniques. All with pros and cons, of course, but all facing problems in particular browser!
And now, here comes Cufón!
This is an alternative which is becoming a standard nowadays. Despite the merits of sIFR, Cufón is much easier to deploy and brings some interesting improvements:
- No plug-ins required,
- Works on every major browser on the market,
- Easy to use,
- very little configuration needed for standard use cases,
- No impact on SEO.
It has been designed with developers in mind. Therefore the API is simple and configuration is usually not needed at all, as most of the needed information is provided by CSS style sheets.
In order to function, we need to use the font converter utility on the Cufón website. Alternatively, you may download the source code and convert your fonts locally.
The Implementation is pretty easy:Don’t forget the glyphs
3. Replacing the text:
Cufon.replace(‘h1’); // replace as necessary
For the first line you can use the online version of the library.
As you can see, no jQuery like library is used so far.
Avoid delay display in IE by adding this line just before body closing tag:
Of course, you can use JQuery selectors to target specific pieces of your design.
Don’t forget then to import the JQuery library!
[html] Cufon.replace(‘#mydiv h2’); [/html]
We use Cufón on this site ! Check the posts titles for example.
Check this site out http://www.cufonfonts.com/ as it contents ready to use Cufón fonts, so you can skip the generation process.A tiny sample of the library.