Cufón definitely gives a nice touch to the looks of a site. If you are not familiar with Cufón, check this blog posting which is where I learned how to solve my problem at the first place.
If you have installed a WordPress, Joomla, Drupal, e107, DNN, Umbraco (you get the idea) template which offers Cufón rendering out of the box, but your foreign characters seem to disappear, you will find the solution below.
Cufón font files and foreign languages & characters
Cufón uses font files for rendering. Typically these appear in the name format Verdana_400.font.js. Most default implementations of Cufón come with a font file which only consists of the Basic Latin characters in order to keep the size of the script low (this is a common practice in the Flash world as well). Since this default file does not include the international characters you are looking for, they do not show up in the browser. The characters are not corrupt, however, the necessary glyphs cannot be found. You won’t see garbage characters but they will simply be missing or will be replaced by a dot or something.
Solution is obvious, you need to replace the provided font.js file with a fonts file that contains the foreign characters you are looking for. This will give the support for the foreign language or foreign languages that you publish in.
Generating a Cufón font file that supports foreign characters
- Go to Cufón generator page
- Select the font that you would like to use from your computer. If you are looking for a default font, in Windows 7 you can find them under C:WindowsFonts. Go to this location and drag the font that you would like to use to your desktop. You will then see the actual font files that you can use in the Cufón generator.
- Once you pick all the font faces that you like (bold, italic etc.) scroll down and pick the glyphs that you would like to have included in the js file. Remember, each one you pick will add to the script size so pay attention to what you select. Do not simply pick all the options.
- The first few items are self explanatory. You can simply skip the options until the Basic Latin which is selected by default. This Basic Latin includes all of the previous four items (Uppercase, Lowercase, Numerals, Punctuation). Here is a short explanation about the rest if the definitions on the page sound French to you (click on the items to see what the character set actually contains):
Basic Latin – If all you will type is English, this may be enough. Remember, this is very basic and does not even include the euro sign (€) or the copyright symbol (©).
Latin-1 Supplement – This adds 96 more glyphs to your file, including all the common symbols and the Western European characters. If you are only targeting Western European languages, this will suffice.
Latin-A Supplement – If you are looking for Eastern European characters, this is what you need. With additional 128 glyphs, this will support additional languages including Turkish, Czech, Polish and Hungarian.
Latin-B Supplement – This will add 208 more characters to your portfolio and let you support Pinyin and most African languages.
The last three selections are easy, Cyrillic, Russian and Greek and Coptic.
This tools also lets you add single characters to your fonts file. For the “size conscious”, this gets handy. If your site is only Turkish, you can move on by only adding 8 glyphs to Latin-1 instead of selecting the whole Latin-A.
- Review the other sections, accept the terms and click “Let’s Do This”. This will prompt a download window and will give you your fonts file.
- Replace the existing font file with this (make sure you update the script references from the template file)
You should now see your foreign characters (or international characters as called by some) properly.