Skip to content

Missing foreign characters in Cufón? Bring them back!

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.

 

Categories: Internationalization.

Comment Feed

10 Responses

  1. Thanks Emre.You explained very descriptive of the problem solution.Thank you for the gain in time.

  2. Hi Emre,
    Do you have a solution for Hebrew? I am using a theme that does not have Hebrew fonts and I need help. Thanks!

    • Pola, since the font generator page does not have an exclusive selection option for Hebrew, you will have to select the option “All”. If you can find a font that only supports Latin and Hebrew, that would be your best option. Selecting a font like Arial will result in a very large font file since Arial has tons of glyphs to support many languages.

  3. Hello brother, the website I am working on uses cufon and it was not supporting greek. So I generated a new font.js file with all options checked and used Oswold.ttf font and then replaced the old font.js file. But the site is still not working for greek. What wrong have I done? Any help please.

    Thanks

    • Did you fix the the reference to the font file in the metadata section of your template? (e.g src=”old_font.js” > src=”new_font.js”)

  4. I found the problem. It was the problem with the font. “Oswold.ttf” was not supporting Greek. I have changed the font to “Arial” and the problem is solved.

  5. Hi Emre,
    ı have generated font file but I can’t find the old .js file to replace with. Can you help on this?
    Thanks
    Mehmet

    • Mehmet, the font file is most likely under the theme folder. If you are on WordPress this will be wp-content/themes. Locate the theme that you are using with its name and look for .js files under.

  6. Yes ı use WordPress with PAGELINES theme. Under the theme folder there is a js folder which contains three .js files: scrip.blocks.js, script.strap.js, script.supersize.js.

    Sorry about my ignorance but i dont really know what to do at this point.
    Thanks for the helps.
    Mehmet



Some HTML is OK

or, reply to this post via trackback.