Comparison of web fonts solutions

Business > Webmaster
4
2012-01-23 09:06:16

When designing a website you or your customers probably want to change from the default available fonts. There is several alternatives with their own drawbacks. Make sure to have a look at the comparison table below to make the right choice for you.

Main aspects to watch

Compatibility

If you want your website to look nicely on most browsers like an iPad or some other mobile devices or on old browsers, you will have to be careful with the compatibility section.

Flash Of Unstyled Text (FOUT)

During a small duration the page show the default browser font, before refreshing the page with the font you want. To avoid this annoying behavior choose a technique that loads quickly: "with no FOUT"

Related comparisons: http://socialcompare.com/en/comparison/browser-fonts-support-comparison
@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
Embed
  • 2010-05-24 01:23:59
    2012-01-23 09:06:16
  • Webmaster
    English
  • Compare web fonts alternative including text replacement solutions: @font-face vs sIFR vs typeface.js vs Cufon...
  • Public
    Public
  • Creative Commons License CC-BY-SA 3.0 / GNU FDL
    Manage backups

Comments

  • What is the faster solution (page loading) ? Quelle solution la plus rapide sur le chargement de la page ?
    Français Posted 2013-10-12 13:15:58 by madvic
  • voted for Google Font API (Like)
    Posted 2012-01-23 09:15:05 by Alexis
  • voted for WebINK (Like)
    Posted 2012-01-23 05:01:58 by bdunzer
  • voted for this Comparison (Like)
    Posted 2011-05-02 09:27:00 by Seralive
  • voted for this Comparison (Like)
    Posted 2011-01-19 05:12:40 by Romain Sandri
  • voted for this Comparison (Like)
    Posted 2010-06-11 03:29:05 by Mathias
  • voted for @font-face (Like)
    For now it's still complex to make it compatible with most browsers, but it's a promising solution.
    Posted 2010-05-28 02:28:02 by Alexis
  • voted for this Comparison (Like)
    Posted 2010-05-24 02:54:24 by Alexis

Leave a comment

Build comparison tables or lists about everything !

It's free and fast to publish data into original tables

Create a table