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.
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:
<html>
<head>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Giddyup_Std_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1') ('h2');
</script>
</head>
<body>
<h1>This is an H1 in Giddyup Std.</h1>
<h2>This is an H2 in Giddyup Std.</h2>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</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.
Comments
choice 3)sifr it's seo
choice 3)sifr
it's seo friendly, but you need to have flash installed yes
No more SEO friendly than
No more SEO friendly than Cufon mate.
i know. it was more a
i know. it was more a response to this part of the post
"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."
Overcome SEO issues with images with Alt. Text
If you are using CCK fields, there is an option to enable custom Alt text for images. When enabled you will see fields for Alt text and title. Using these fields to define your meta tags will overcome the deficiency of putting text in an image, but also will help to get those images to show up in image searches.
Adobe font list
Hi Laura Just a few question; 1)You say "Their library is extensive, so there’s a lot to choose from." Do you have by any chance a full list of Adobe Copyrighted fonts. There are lots of fonts that Adobe provide but only the once that are Adobe Copyrighted can be used ( or not, I have been waiting for 2 weeks for an answer from Adobe about their font licensing policy) 2) Are you certain that Adobe Fonts can be embedded without additional licensing? (I checked with Monotipe ( Helvetica, Avant Garde and many others - they charge {font priceX4} for font embedding license.)
Post new comment