@font-faceGoogle Font APITypeKitWebINKKernestCufóntypeface.jssIFRFLIRImages replacementWeb-safe fonts
DescriptionCSS standard to define the fonts to use.CSS and optional Javascript library that handle and serve a set of fonts.
Behind the scene use @font-face but manage the different formats for you. And font is served by Google.
The Javascript API enables more control over font-loading management and let you integrate TypeKit fonts too.
Service that allow you to use a library of fonts directly from their servers. It's similar to Google Font API (based on @font-face) but let's you use more fonts with a subscriptions fee.Service that allows you to choose from thousands of fonts. Similar to Typekit but only uses CSS and no JavaScript.Similar to Google Font API. Uses @font-face and serves the fonts through their service.Javascript library that will parse your text and replace it as a canvas or VML path.Javascript library that will parse your text and replace it as a canvas or VML path. The technique is similar to Cufón.Javascript library that will parse your text to replace it with Adobe Flash.Javascript library and PHP script to replace text by images.Use any image editor to render your text and save as an image.Use a list of fonts that are generally present in most environments (OS/browser)
Websitehttp://www.w3.org/TR/css3-fonts/#the-font-face-rulehttp://code.google.com/apis/webfonts/http://typekit.com/http://www.webink.comhttp://kernest.com/http://wiki.github.com/sorccu/cufon/abouthttp://typeface.neocracy.org/http://wiki.novemberborn.net/sifr3/http://facelift.mawhorter.net/http://en.wikipedia.org/wiki/Web_typography#Web-safe_fonts
Difficulty to setupeasyeasyeasyeasyeasymediummediumhardhardeasyeasy
Dependenciesexternal web serviceJavaScript, external web serviceexternal web serviceexternal web serviceJavaScriptJavaScriptJavaScript, FlashPHP, JavaScript
Pros+ accessibility is maintained
+ full unicode support
+ font style support
+ font is served by google and might already be in the browser cache
+ font style support
+ large selection of fonts
+ font is served by typekit servers
+large selection of professional fonts + fonts served from Amazon Cloudfront servers+ large selection of fonts
+ font is served by kernest servers
+ good support over different browsers
+ you can select the set of characters you need to limit the file generated to represent the font.
+ font-style support is harmonized accross all browsers (text-shadow...)
+ good support over different browsers+ compatible on all graphic browsers+ compatible on all graphic browsers
+ no typography limitations
+ lightweight (nothing to download)
Cons- no common font file format to use across all browsers
- some formats are heavy to download
- limited list of fonts
- limited character sets
- yearly feemonthly fee- text not selectable
- due to perfomance, it's more appropriate for headers and small text only
- require some work around for special styling (text-decoration, :hover...)
- text not selectable - due to perfomance it's more appropriate for headers and small text only- requires flash
- slow
- flash/adblocker issues
- bandwith consuming
- text not selectable
- requires PHP/GD on the server side
- need to render each text as an image
- bandwith consuming
- text not selectable
- limited list of fonts
Font licensing issueneed font rightsGoogle serve only open sources fontthe fee you pay cover the licences for the fonts served by Typekitthe fee you pay covers the licences for the fonts served by WebINKyou can choose between Open Source fonts and fonts you need to pay forneed font rightsneed font rightsmost fonts allow flash embeddingnono
Additional linkhttp://www.fontsquirrel.com/fontfacehttp://cufon.shoqolate.com/generate/http://www.sifrgenerator.com/http://www.interactimage.com/http://www.flywebmaster.com/webdesign/tips/compatibility.php
Features
Text selectableYesYesYesYesYesNoYesYes but only selectable on its own (not with rest of page)NoNoYes
AccessibleYesYesYesYesYesYes not 100% thoughYes
Text scalableYesYesYesYesYesNo it doesn't scale when text size is changed on the fly, but it does scale when the text size has been changed before the page was loadedNo it doesn't scale when text size is changed on the fly, but it does scale when the text size has been changed before the page was loadedNoNo it doesn't scale when text size is changed on the fly, but it does scale when the text size has been changed before the page was loadedNoYes
Loads quickly (no FOUT)YesYesYesYesNoNoNoYes
Compatibility
Internet ExplorerYes 4+ (EOT, WOFF (IE9) fonts)Yes see @font-faceYes see @font-faceYes IE 4+ (EOT, WOFF)Yes see @font-faceYes 6+Yes 6+Yes with flashYesYesYes
FirefoxYes 3.5+ (TTF, OTF, WOFF (FF3.6) fonts)Yes see @font-faceYes see @font-faceYes 3.5+ (TTF, WOFF)Yes see @font-faceYes 1.5+Yes 1.5+Yes with flashYesYesYes
SafariYes 3.1+ (TTF, OTF fonts)Yes see @font-faceYes see @font-faceYes 3.1+ (TTF, WOFF)Yes see @font-faceYes 3+Yes 2+Yes with flashYesYesYes
Google ChromeYes 4+ (TTF, OTF fonts)Yes see @font-faceYes see @font-faceYes 3.5+ (TTF, WOFF)Yes see @font-faceYes 1.0+Yes with flashYesYesYes
OperaYes 10+ (TTF, OTF, SVG fonts)Yes see @font-faceYes see @font-faceYes 10+ (TTF, WOFF)Yes see @font-faceYes 9.5+Yes with flashYesYesYes
iPhone/iPadYes (SVG font)NoYesYes 4.2+ (TTF)Yes see @font-faceNoYesYesYes
Additional
Like 1 1 0 1 0 0 0 0 0 0 0
Last update2011-05-24 21:23:332011-05-24 22:28:142011-05-24 22:28:142012-01-23 09:06:162011-05-24 22:28:142011-05-24 22:28:142011-05-24 22:28:142011-05-24 22:28:142011-05-24 22:28:142011-05-24 21:23:332011-05-24 22:15:05
SocialCompare