Although @font-face, the CSS method for embedding and using any font in a web page, now enjoys rather good browser support, it still has some limitations that keep people from using it. Chief among these is the fact that the license of most fonts, even free ones, do not allow re-distribution over the web using @font-face. Because of this, a number of services and technologies are springing up that provide alternate ways to get non-standard fonts into your pages. I was unable to find any place that listed all of the major @font-face alternatives, so I decided to do my own roundup to provide the basic info on each.

This roundup of alternatives is not meant to discourage the use of @font-face. In the spirit of progressive enhancement, I wholeheartedly think it’s ready to use (with the right fonts, of course). But, in case you are unable or unwilling to use a pure @font-face solution, or you’re just curious what your other options are, here’s are the most popular services and techniques out there for you right now.

Note: This a rapidly evolving area of web design. These solutions are going to change and more are going to be added. I will try to keep this page updated as things change, but if any of the changes are so big that it makes the most sense to just create a new page, I’ll do that instead. Either way, I’ll post a note here indicating where the latest updates are.

Font Embedding Services

These services all make use of @font-face, but make implementation easier by helping you work around the browser differences. They also all get around the legal issue of font embedding by providing you with a set of fonts that are licensed for this type of use and impossible or difficult for end users to steal.

Typekit

Status

Open to all.

Method

Subscription to a font library from multiple foundries by month or year. JavaScript used to connect your site with remote font library. You customize CSS to work with the selectors and tags you need, as well as create a font stack to be used as a fallback if @font-face is not supported, but the CSS is in the JavaScript, not your own sheet. sIFR and Cufón will also be used as fallbacks.

Pricing

Freemium. Free “Trial” account gives access to smallest number of fonts and can be used on one web site. “Personal” account for $24.99/year, “Portfolio” account for $49.99/year, and “Corporate” account for $49.99/month increase limits on fonts, bandwidth, and number of sites.

More Info

• First impressions of Typekit
• Getting Started with Typekit
• First Ten Minutes with TypeKit
• A Few Thoughts on TypeKit

Fontdeck

Status

In development. Sign up on home page to get details when they become available.

Method

Supposedly similar to Typekit’s, but details unknown. Font library will be from multiple foundries.

Pricing

Unknown.

Kernest

Status

Open to all.

Method

A la carte font selection from multiple foundries. Select fonts you want to use and paste generated CSS into your style sheet. No JavaScript involved.

Pricing

Pay yearly subscription for each font individually, per domain. Many fonts free.

More Info

• Using new fonts from Kernest on Blogger
• The importance of knowing Kernest: Pretty high. Your move, TypeKit.
• An Interview With Kernest’s Garrick Van Buren

Typotheque

Status

Open to all.

Method

Fonts come only from the Typotheque foundry. Select fonts you want to use and paste generated CSS into your style sheet. No JavaScript involved.

Pricing

Pay one-time fee for each font individually. Buying installable print version of font for full-price (including access to web version) or web-only version for 20% of full font price. Extra charges for bandwidth over 500 MB.

More Info

• Testing Typotheque @font-face embedding
• Multi-Lingual Fonts with Typotheque and Font Face
• Beta-testing Typotheque’s Font Embedding Technology

Font Replacement Techniques

These techniques do not make use of @font-face, but instead use scripting and/or Flash to display fonts that are not on the user’s system. All of these techniques are free and open to all to use. None of them directly address the licensing issue, but none of them link directly to ready-to-use fonts, so copyright legality is not clear-cut.

sIFR (Scalable Inman Flash Replacement)

Embed your font in a Flash SWF file. JavaScript converts chosen text on the page to Flash text, which can be selected and resized. Some styling handled in CSS and some in JavaScript. Rather difficult to set up.

More Info

• sIFR Generator
• sIFRvault
• Implant sIFR3 – A Healthy Alternative to Browser Text
• How To Implement sIFR3 Into Your Website
• cufón and sIFR (A Visual Comparison)
• Cufon vs sIFR vs FLIR
• Text replacement comparison
• Text Replacement Roundup: The Pros and Cons of SIFR, Cufon, Typeface.js, and FLIR
• Rich Typography Options for the Web

Cufón

Convert your font to a proprietary JavaScript format and link to it and the main Cufón script. Specify CSS normally. Uses the HTML5 canvas element or VML to draw text. Contrary to popular belief, text selection is possible, you just can’t see the selection.

More Info

• The Easiest Way to Use Any Font You Wish
• Exploring Cufón, a sIFR alternative for font embedding
• Combining Cufón and @font-face
• cufón and sIFR (A Visual Comparison)
• Cufon vs sIFR vs FLIR
• Cufón vs. Typeface.js, which one is better?
• Text replacement comparison
• Text Replacement Roundup: The Pros and Cons of SIFR, Cufon, Typeface.js, and FLIR
• Rich Typography Options for the Web

typeface.js

Same idea as Cufón, but somewhat lower performance and quality. Convert your font to a proprietary JavaScript format and link to it and the main typeface.js JavaScript library. Specify CSS normally. Uses the HTML5 canvas element or VML to draw text.

TypeSelect is based on an older version of typeface.js, but now that typeface.js supports text selection, it seems to be redundant.

More Info

• Cufón vs. Typeface.js, which one is better?
• Text replacement comparison
• Text Replacement Roundup: The Pros and Cons of SIFR, Cufon, Typeface.js, and FLIR
• Rich Typography Options for the Web

FLIR (Facelift Image Replacement)

Uses PHP and JavaScript on a regular font file that you upload to your web server to dynamically generate images.

More Info

• Install FLIR – Typography Solution For The Web
• How To Use Any Font You Wish With FLIR
• Cufon vs sIFR vs FLIR
• Text Replacement Roundup: The Pros and Cons of SIFR, Cufon, Typeface.js, and FLIR
• Rich Typography Options for the Web

PIR (PHP Image Replacement)

Uses PHP and jQuery on a regular font file that you upload to your web server to dynamically generate images.

FontJazz

Convert your font to an image containing each character in a specific size and color. A generated JavaScript for the font displays the appropriate character for each word.

More Resources

There are a ton of general articles and web sites out there about @font-face, font embedding services, font replacement methods, the politics of web fonts, and more. Here are just a few that I think are particularly helpful.

• Webfonts.info wiki
• Beautiful fonts with @font-face
• The Font-as-Service
• Why webfont services are the future of fonts on the web
• The direction forward with web fonts
• Designing with @font-face delivery services
• Web Fonts Panorama – September, 2009
• WOFF, the web standard for type
• Typography for the Web—NY Web Standards Meetup
• Rich Typography On The Web: Techniques and Tools

Luckily, I ran into a large source of free handwriting fonts called Fonts for Peas, part of the kevin & amanda blog. These are fonts that are meant to be used for scrapbooking, family blogs, and the like, so most of them are pretty cutesy. But, with 333 to currently choose from, you’re bound to find a few that you could use. All of the handwriting fonts are based on actual handwriting samples that readers of the blog send in, so they’re pretty diverse. I downloaded a couple dozen myself and am excited to try them in my logo comps.

Jane Austen quotations set in Pea Bandit, Pea Mystie Caps, and Pea Anderson.

Mixed in with the handwriting fonts are a few hand-drawn symbol fonts that would make nice icons. There’s also another section of the site called Free Scrapbook Fonts that currently has over 100 decorative fonts to choose from.

Now, I know these aren’t very high quality fonts, in terms of kerning and metrics and ligatures and all those things that make a professional font a professional font. But, I think many of them will work in small doses, especially if you’re going to be manually kerning and tweaking them yourself.

These fonts are free for personal use, and you can use them for free commercially if you display a button linking back to the site. If you don’t want to do this, you can buy a single-font license for $10. (That’s what I’ll be doing if I end up using a font in the logo I’m working on.) Read all the details in the terms of use.