How to work with Cufon generated fonts (Advanced)

This tutorial is going to show you how to add special characters to the existing text built with cufon or change it to a different cufon generated font.

Cufon is an online font generator, which can transform any font from your computer into specific Java script. Later, in order to embed a font into a web page, you just need to load it with thescript tag. Prior to font transformation, you can manipulate with some font features, such as included character sets or glyphs, in order to optimize a font for particular web application. And also it is SEO friendly.

If your template comes with cufon, and you are going to replace it with a different one or add some special characters to it:

1.First off all, you need to find out what font is used for the particular text.

Go to the sources(+symbols)/psd folder in your template package. Open the .psd file that represents the page with the font you want tomake changes to in Adobe Photoshop. Selectthe “Type” tool from the “Tools” palette and click on the text or highlight it. Select the font from the “Set the Font Family” drop-down box.

(The Font Family drop-down selection box in Photoshop’s Options Bar)

2. Secondly, you need to check if this font supports the special characters of the language you are using for the template, if you want to add any special symbols to it.

If you are on a PC, you can use Font Runner. It’s a free font manager for Windows with which you can manage your font files by keeping them in folders of your choosing. It also lets you examine your fonts and get up close and personal with each particular one by browsing through its supported characters.

Once you have installed Font Runner, open it up and navigate to the font folder on your computer (i.e. C:\Windows\Fonts) from the left-side menu.

In the right-side panel locate your font by starting to type its name. Make sure it’s highlighted, then change the Mode to “Font Map”.

Note, if you do not see the special characters of your language in the “Font Map” table, they are not supported by the current font, and you should choose a different one that does. To find the closest matches, you can use WhatThe Font online service.

3. Now you need to generate your own font’s .js file by uploading your font file at http://cufon.shoqolate.com/generate/. In order to do this,

• copy the font file you want to use to from your “Fonts” folder to your Desktop or any other directory that would allow you to access the font easily . This is going to be the same font used for the template, if you are sure it will support the special characters of your language (as shown above) or a totally different font that supports the characters;
• at http://cufon.shoqolate.com/generate/ select the font you’d like to use(currently only.ttf(TrueType); otf(OpenType); PFB (Printer Font Binary) formats are supported) saved on your desktop using the “Regular Typeface” field or bold, italic and bold italic variations. Be sure to click the EULA box to confirm they allow web embedding
  
• Include the following glyphs (if available) set of options 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, you have to try to restrict symbols number in font file in order not to slow the process of loading a site. It normally is enough to have the Basic Latin option checked. The rest is up to you.

*To determine, if you need to check Latin-1 Supplement, Latin Extended-A,etc, you need to go to http://jrgraphix.net/r/Unicode. On this web page you can see what symbols are related to each of such categories by clicking on it.

In the …and also these single characters input your custom language characters both lowercase and uppercase in one row like this: aistaAISTA

• You can skip through the rest of the options.The default settings are the most recommended.
• Terms: you should agree to the terms by checking the applicable box. Then click the “Lets do this!” button.

4. Save the generated .js file into the “js” folder of your site (if you are working locally) or on your desktop to upload it to your server later.

5. If you have embedded some special characters into the existing font using the Cufon generator,
all you need to do is to replace the existing .jscufon file located in the “js” folder with the new generated one. In this case, both files should have the same names, so it’s going to ask you to confirm the replacement of the file, when moving the file to the “js” folder. Confirm the replacement, and that’s it.

If you have generated a different cufon font, and want to replace the existing one with it, please follow the next steps.

6. Copy the name of your generated .js file (hit F2, then Ctrl + C)

7. Open the index.php or index.html file (depending on your template type) in a text editor or in Dreamweaver and look for the font name you want to replace (see Step1 of this tutorial, if you need to know the name) with Ctrl(Command) + F. It should look like

<script src=”js/font_name.font.js” type=text/javascript></script>

and replace the font_name with the name of your generated .js file (Step 6). Then save the changes.

8. Open your generated .js file a file and copy the font-family name where it says

  font-family:font  family name

9. Open the cufon-replace.js in the “js” folder of your template and replace the font-family name of the existing font with the font-family nameof the generated font and save the changes.

10. Open your website in a web browser to check if the font has been replaced. Fit F5 to clear the caches, if needed.

For more info, please check the video tutorial below

how to change Google Map location in WordPress