Search Engine crawlers are great at crawling text. They can pick out words and phrases and interpret the meaning of a page and then list it in search engine searches related to those words. However, search engines are not great at reading text in images. But, you and your client really want to use a font other than the Arial, Verdana, Times New Roman, or Georgia. Lucky for you there are a few options for using uncommon fonts that will be displayed to your visitors regardless of their browser.

Font Display Techniques

Cufón offers the ability to upload a font file (.ttf, .otf, and a few others) and spits out a javascript file that, in conjunction with the cufón base code will use the canvas HTML5 element to display the font you want. The text is actual text and can be selected by a browser as well as crawled by the search engines. Because cufón leverages HTML5, there are still some complications with IE, though they can be overcome with some additional code. A full set of instructions are available to aid you in using this method.

Typekit offers a more plug-and-play option to add custom fonts to your website. You add a single line of code to your templates and you can then configure your font settings from the Typekit website. They offer a free version that supports a partial font library, but the paid versions incorporate many more fonts and more flexibility in how many fonts you can use and where. You can browse the full line-up of fonts to get a feel for the wide range of options they offer. Typekit supports all modern browsers and will cover 95% of traffic for most people.

Google Font Directory works in a similar way to Typekit, but without any required registration. We detailed this on the Schipul blog after it was announced at Google IO, but it should also be included as an easy option. Currently there is a very small selection of fonts available, but we are guessing that number will grow.

@font-face is a CSS option that allows you to point to a font file and have it displayed in the browser. While this is technically supported by most browser, the different font types are not very well supported. Safari, Chrome, Firefox, and Opera support TrueType/OpenType TT fonts and OpenType PS fonts. Internet Explorer supports Embedded OpenType fonts. The biggest difference in the font types is the licensing and security behind them, and it is unlikely any browser will support all font types in the near future. What this means is that it takes some work to use @font-face to display the proper font to all of your website visitors.

The Best Text for Your Site

The Google Font Directory offers the easiest way to implement a new look to those headings, menus, and sidebars. Typkit is just as easy, and expands the font library for a small yearly fee. Cufón and @font-face are a bit more technical, but give you more freedom in the fonts you choose to use. Pick the option you are more comfortable with and implement it on your website.

Of the four options above, all of them are better for optimizing your site than using images of that fancy font. Most often the areas that use images as text are loaded with great keywords, and if the site is coded right, they will appear in headings that have a heavier SEO weight than general text. This is also true of phone numbers and addresses, which in text can be crawled and displayed on Google local listing pages. Overall, you are better off using text, and the options above are currently your best bet to satisfy the SEO team and the design team.