Roundup of Font Embedding and Replacement Techniques
There are more options than ever for getting unique, good-lookin’ fonts into your pages. Apart from @font-face, here are your options for font embedding services and font replacement techniques.
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
- 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
22 Comments
You can follow the comments for this post through the comments RSS feed.
1
Tweets that mention zomigi.com » Roundup of Font Embedding and Replacement Techniques -- Topsy.com wrote on September 17, 2009, at 11:18 am:
[...] This post was mentioned on Twitter by Clive Walker and Zoe M. Gillenwater. Zoe M. Gillenwater said: Just blogged on zomigi.com: Roundup of Font Embedding and Replacement Techniques http://bit.ly/2P5U0f #css #webfonts #typography [...]
2
Richard Fink wrote on September 17, 2009, at 12:15 pm:
Nice roundup, Zoe.
Font-linking with @font-face is most definitely the future. It’s the cleanest, simplest, most elegant solution.
And there are many, many free fonts available for experimentation.
The problem now is the rendering quality – anti-aliasing, and the like. Too many fonts look scraggly and unattractive onscreen. And very few are easy to read at smaller sizes.
New words are going to enter web designer’s vocabularies – words like hinting, CFF, and rasterizer.
Richard Fink
3
Zoe Gillenwater wrote on September 17, 2009, at 1:00 pm:
I agree, Richard.
4
Internet Brain » zomigi.com » Roundup of Font Embedding and Replacement Techniques wrote on September 17, 2009, at 8:58 pm:
[...] zomigi.com » Roundup of Font Embedding and Replacement Techniques [...]
5
Roundup of Font Embedding and Replacement Techniques | Design Newz wrote on September 17, 2009, at 9:01 pm:
[...] Roundup of Font Embedding and Replacement Techniques [...]
6
zomigi.com » Roundup of Font Embedding and Replacement Techniques wrote on September 18, 2009, at 1:25 am:
[...] More: zomigi.com » Roundup of Font Embedding and Replacement Techniques [...]
7
Rodrigo Soares wrote on September 18, 2009, at 1:14 pm:
Nice Article. You should have included Font Squirrel (http://www.fontsquirrel.com/). It’s a free collection of font-face kits that comes with OTF and EOT fonts ready to be embed.
8
Zoe Gillenwater wrote on September 21, 2009, at 2:27 pm:
Hi Rodrigo. I considered including the link you’re referring to in my list of general links at the end, but didn’t because not all of the fonts provided there are absolutely positively 100% sure-thing safe to use with @font-face. But, yes, it is handy, and probably safe. BTW, folks, the direct URL is http://www.fontsquirrel.com/fontface. The link that’s the safest to recommend, IMO, is webfonts.info list of fonts, but it doesn’t include EOT versions to download. But, all this is getting off-topic, as it pertains to using @font-face, not a third-party service or technique. So I’ll shut up now.
9
favSHARE wrote on September 22, 2009, at 6:51 am:
This article has been shared on favSHARE.net. Go and vote it!
10
Kick-Ass Squeeze – September 2009 wrote on October 16, 2009, at 8:23 am:
[...] Roundup of Font Embedding and Replacement Techniques – “There are more options than ever for getting unique, good-lookin’ fonts into your pages. Apart from @font-face, here are your options for font embedding services and font replacement techniques.” [...]
11
Rich Typography On The Web: Techniques and Tools « Smashing Magazine wrote on October 22, 2009, at 10:59 am:
[...] Roundup of Font Embedding and Replacement TechniquesAn excellent roundup with information on a variety of techniques and scripts. [...]
12
Digital Multimedia & Web Design | VSHoward.com » Rich Typography On The Web: Techniques and Tools wrote on October 23, 2009, at 8:59 am:
[...] Roundup of Font Embedding and Replacement Techniques An excellent roundup with information on a variety of techniques and scripts. [...]
13
movito – Testing web fonts wrote on October 24, 2009, at 5:01 am:
[...] Zomigi’s excellent Roundup of font embedding and replacement techniques [...]
14
Fredrik Matheson / @movito wrote on October 24, 2009, at 8:42 am:
Thanks for creating this great roundup! I’ve linked to it from my testing web type post.
BTW: Typotheque’s solution has just been launched, you might want to add its details to the list above.
15
clippingimages wrote on October 25, 2009, at 6:04 am:
Nice article for font replacement technique. Very informative. Thanks for sharing this awesome post.
16
Rich Typography On The Web: Techniques and Tools « LocalLab : Foire aux Infos wrote on October 25, 2009, at 1:30 pm:
[...] Roundup of Font Embedding and Replacement Techniques An excellent roundup with information on a variety of techniques and scripts. [...]
17
Web Design News » Rich Typography On The Web: Techniques and Tools wrote on October 26, 2009, at 3:08 am:
[...] Roundup of Font Embedding and Replacement TechniquesAn excellent roundup with information on a variety of techniques and scripts. [...]
18
Modern CSS Layouts: The Essential Characteristics « Smashing Magazine wrote on October 26, 2009, at 11:42 am:
[...] Roundup of Font Embedding and Replacement Techniques [...]
19
Modern CSS Layouts: The Essential Characteristics « Tech7.Net wrote on October 27, 2009, at 3:00 am:
[...] Roundup of Font Embedding and Replacement Techniques [...]
20
Sharp Machine Media Blog » Blog Archive » Modern CSS Layouts: The Essential Characteristics wrote on October 27, 2009, at 1:26 pm:
[...] Roundup of Font Embedding and Replacement Techniques [...]
21
Modern CSS Layouts: The Essential Characteristics « Web Tutorials wrote on November 10, 2009, at 8:54 am:
[...] Roundup of Font Embedding and Replacement Techniques [...]
22
Web Font Replacement Frustration wrote on January 10, 2010, at 11:35 pm:
[...] there were other options…Flash, FLIR, sIFR, Cufón, @font-face and more. This article has a great roundup, including links. Because every day last year, my inbox seemed to burst with [...]