Drupal. How to add special characters in Cufon fonts

This tutorial is going to help you add special characters to the Cufón font on your Drupal template.

If your in your Drupal template Cufón is used and some characters are not showing up, please do the following:

1. You need to find out what font is used for this text. Open the .psd file that comes with the template (/sources/psd folder) and find the font name there.
2. You need to check if this font supports the characters you want to enable. Try inserting these characters into .psd and change the font. No changes means it’s not supported and you need to use another one that does by turning it into Cufón:
3. Go to http://Cufon.shoqolate.com/generate and turn the font that you are sure  to support the special characters into Cufón:
4. Navigate to the font you’d like to use using “Regular Typeface” field or bold, italic and bold italic variations. Be sure to click the EULA box to confirm they allow web embedding



5. Under “Include the following glyphs (if available)” check the symbols you are using depending on the language of your site and other needs. Every additional group of symbols enlarges the size of font file:



6. You can skip through the rest of the options.The default settings are the most recommended.
7. Agree to the terms by checking the applicable box.
8. Click the “Lets do this!” button.



9. This will generate a .js file that you need to upload to the \sites\all\themes\theme_name\js folder on your server.If you are using the same font with the embedded characters, you will be asked to replace the existing .js file there under the same name and check your site out to see the changes. If the font name is different, open your generated .js file in a text editor and copy the family name from there.

   E.g. if it says "font-family":"Showcard Gothic", copy Showcard Gothic

10. Open the Cufón-replace.js in the “\sites\all\themes\theme_name\js” folder and replace the font-family name of the existing font with the font-family name you copied  and save the changes.

    E.g. if it says  
    #content h1.title’, { fontFamily:’MgOpen Moderna’, hover:true});
    change it to
    #content h1.title’, { fontFamily:’ Showcard Gothic’, hover:true});
    where Showcard Gothic is your new font family name.

11. Open your website in a web browser to check if the font has been replaced. Hit F5 to clear the browser caches or your Drupal caches, if needed.

Feel free to check the detailed video tutorial below:

Drupal. How to add special characters in Cufon fonts