zomigi.com » typography http://zomigi.com The professional blog of Zoe Mickley Gillenwater Thu, 10 May 2012 16:30:37 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Roundup of Font Embedding and Replacement Techniques http://zomigi.com/blog/roundup-of-font-embedding-and-replacement-techniques/ http://zomigi.com/blog/roundup-of-font-embedding-and-replacement-techniques/#comments Thu, 17 Sep 2009 14:58:17 +0000 Zoe Gillenwater http://zomigi.com/?p=242 This post was last updated February 2010

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

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

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

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

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

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

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

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.

Related Posts:

]]> http://zomigi.com/blog/roundup-of-font-embedding-and-replacement-techniques/feed/ 30