Create Headlines With Cufon

For years, web designers have been faced with two choices when creating a text-element on a page: 1) Stick with web fonts: Arial, Tahoma, Georgia, et al, and use HTML text, or 2) Use text as images.

Laura Schoppa, Senior Designer
#Development | Posted

For years, web designers have been faced with two choices when creating a text-element on a page: 1) Stick with web fonts: Arial, Tahoma, Georgia, et al, and use HTML text, or 2) Use text as images.

The first option is not too shabby because some of these (Georgia is one of my favs) are incredibly beautiful fonts. Using HTML text allows easy updates to a site and is more search-engine-friendly. Still, sometimes, a designer can’t help herself, and she wants to use a bold, funky non-web font like Giddyup Std. for a title graphic. In that case, up until recently, an image was the only option. Looks nice – but easy to update? Not so much.

Luckily, you’re now able to create editable text on the web using non-web fonts using Cufon.

Cufon lets you create editable headlines, navigation links and other text elements using javascript, SVG (Scalable Vector Graphics) and the HTML canvas element. See more details here. This sounds a lot more complicated than it is. Here’s what’s involved:

1. Download the Cufon javascript file.

2. Run a preferred font file through the free Font Generator.

3. Download the Javascript generated by the Font Generator.

4. Refer to the Javascript in your HTML file like so:

  1. <html>
  2. <head>
  3. <script src="cufon-yui.js" type="text/javascript"></script>
  4. <script src="Giddyup_Std_400.font.js" type="text/javascript"></script>
  5. <script type="text/javascript">
  6. Cufon.replace('h1') ('h2');
  7. </script>
  8. </head>
  9. <body>
  10. <h1>This is an H1 in Giddyup Std.</h1>
  11. <h2>This is an H2 in Giddyup Std.</h2>
  12. <script type="text/javascript"> Cufon.now(); </script>
  13. </body>
  14. </html>

 

The result looks like this:

 

 

A Word about Font Licensing

Different fonts have different end-user license agreements. To be on the safe side, I try to stick with Adobe fonts. Adobe.com states that “all fonts produced by Adobe Systems can be embedded in Adobe Portable Document Format (PDF) files, as well as other types of files.” See more about that here. Their library is extensive, so there’s a lot to choose from.

Laura Schoppa

Senior Designer