The possibility of embedding fonts in CSS is still a distant perspective because of lack of support in browsers used by majority of Internet users. However, sometimes there is a need to use font in layout which is completely different in its look than other font group which is available for Internet users. A solution to this problem can be Cufon script.
It is worth mentioning at the very beginning that I don’t like these types of solutions but at present, it is one of the universal way of solving a problem with untypical fonts.
Mentioning that I have been a co-author of some templates which have support for Cufon, I would like to pay attention to some issues about which customers/developers are talking about repeatedly.
JavaScript is a must
Cufon is a script so we can forget about our beautiful fonts in layouts in our browsers which have JavaScript off. Luckily, there aren’t many people who turn off scripts especially to those who have browsers not supporting embedding fonts.
How to tackle?
A very common problem is lack of some letters typical for different languages. In this case, we have to remember about two things, namely:
- A majority of fonts have a restricted number of symbols therefore, generally, you have to choose another font which supports symbols which are typical for a language given.
- If we have such a font, we have to generate it properly – files font generator for Cufon includes “Include the following glyphs (if available)” section which allows us to choose appropriate group of symbols to attach in font file. It has to be remembered that every additional group of symbols enlarges the size of font file. Thus, we have to try to restrict symbols number in font file in order not to slow the process of loading a site.
Size is important
Cufon works really fast and generally we do not see in browsers like Firefox or Chrome when casual text is exchanged to a text written another font. But you have to remember that a lot of it depends on the size of font files – if they are big, a user will see the exchange of the text while loading the site for the first time. That’s why, caring about the first impression, it is worth to care about the size of fonts generated for Cufon.
Problematic line-height
One of the most important parameters for the text is the line – height specified in CSS by line – height quality. Unfortunately, Cufon has some problems with this parameter; in the case when e.g. our template is written in (X)HTML Transitional, in the majority of browsers the change of line height just will not work. Personally, I have used sometimes margins for cufon elements which are generated by script to represent letters.
Other CSS effects also cause problems
Generally, if we need to use some specific effects for the text like: transparency, shading, etc, firstly it is worth to get to know a documentation connected with text styling generated by Cufon.
Cufon and other scripts
Cufon is not based on any framework that’s why it is rather non problematic when it comes to use on sites with e.g. MooTools or jQuery. It’s worth remembering that a text created by Cufon is not dynamic. So if we need to modify content of a text container which is full of text from Cufon, after this modification the text will be displayed with font consequential from CSS styles. To save our text with our font, certain code has to be called:
Cufon.refresh();
Refresh function loads as an argument a selector so in situation where we have a lot of texts generated by Cufon, we can render font just for element specified.
Summary
That’s all about possible problems while using Cufon at our sites. For those who are interested, I will suggest an official documentation of the project.