Cufon font replacement

Cufon font replacement

August 24, 2009  |  documentation

In version 1.1 a cufon uploader was added, and since there have been many questions about this, some documentation on this functionality seemed necessary.

Cufon fonts are enabled/disabled for various elements in the theme settings. For an uploaded font to work it has to be enabled first. From version 1.1.2 all cufon elements can have it’s own font by specifying the element name in the description field of the uploaded font.

cufon-settings
Enable the cufon elements first and then upload the generated fonts.

cufon-uploader
Change the title to the font name and elements can be entered into the description field.

Predefined targets (that you can write in the description field): sitename,slogan,navigation,h1,h2,default, or you can use “custom:” to target classes or tags. default was added in version 1.3.3 and it sets this font as the default font, and prevents loading of the one in the dropdown list.

Generate and upload a cufon font
  1. Compile the font here (make sure the licensing of the font allows web embedding, best to use free ones). A custom font name can be given when generating the cufon font…this will make it easier to get the right font name. Enter the name in the input field: “Use the following value as the font-family of the generated font”. Add the following glyphs: Uppercase, Lowercase, Numerals, Punctuation, WordPress punctuation and Basic Latin.
  2. Upload the compiled js font file with the cufon uploader in the theme settings.
  3. Write the font name in the title of the uploader. It is different than the filename that is there by default, and can sometimes be tricky to get the right name (if not a custom name is entered when generating the font).
  4. You can also write the element you want this font to change in the description field. f.ex: sitename (or a comma separated list with these possible values: sitename,slogan,navigation,h1,h2,default). From version 1.2 a custom tag selelctor can be entered in the description to target any element on the website. Just write custom: and the css tags, for example “custom: .post h4″ (without the quotes).
  5. Press “save all changes” (not necessary to save the settings).

Upload more fonts
  1. Generate and upload another font and change it’s title.
  2. Change it’s order to 1 (drag and drop or write the sort order) to make it the default font (replaces the built in font).
  3. Other fonts can be added if the elements are specified in the description.
  4. Write the element you want this font to change in the description field. f.ex: sitename (or a comma separated list with these possible values: sitename,slogan,navigation,h1,h2,default).
  5. Add more fonts…

Example of custom targeting in the description field
custom:.cufonized,custom:.post h4,h1,h2

See this video for more information on using cufon and targeting.

No Comments


Trackbacks

  1. Frequently Asked Questions | BigFeature