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.
2. Run a preferred font file through the free Font Generator.
- Cufon.replace('h1') ('h2');
- <h1>This is an H1 in Giddyup Std.</h1>
- <h2>This is an H2 in Giddyup Std.</h2>
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.