Compare Sizes
Register
English Français Español

Comparison of web fonts solutions

4

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: browser-fonts-support-comparison
Link
@font-faceGoogle Font APITypeKitWebINKKernestCufóntypeface.jssIFRFLIRImages replacementWeb-safe fonts
BeschreibungCSS 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)
Webseitewww.w3.org/...google.com/...typekit.comwebink.comkernest.comgithub.com/...neocracy.orgnovemberborn.net/...mawhorter.netwikipedia.org/...
Difficulty to setupeasyeasyeasyeasyeasymediummediumhardhardeasyeasy
Dependenciesexternal web serviceJavaScript, external web serviceexternal web serviceexternal web serviceJavaScriptJavaScriptJavaScript, FlashPHP, JavaScript
Vorteile+ 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)
Nachteile- 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 linkfontsquirrel.com/...shoqolate.com/...sifrgenerator.cominteractimage.comflywebmaster.com/...
Eigenschaften
Text selectableJaJaJaJaJaNeinJaJa but only selectable on its own (not with rest of page)NeinNeinJa
AccessibleJaJaJaJaJaJa not 100% thoughJa
Text scalableJaJaJaJaJaNein 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 loadedNein 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 loadedNeinNein 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 loadedNeinJa
Loads quickly (no FOUT)JaJaJaJaNeinNeinNeinJa
Compatibility
Internet ExplorerJa 4+ (EOT, WOFF (IE9) fonts)Ja see @font-faceJa see @font-faceJa IE 4+ (EOT, WOFF)Ja see @font-faceJa 6+Ja 6+Ja with flashJaJaJa
FirefoxJa 3.5+ (TTF, OTF, WOFF (FF3.6) fonts)Ja see @font-faceJa see @font-faceJa 3.5+ (TTF, WOFF)Ja see @font-faceJa 1.5+Ja 1.5+Ja with flashJaJaJa
SafariJa 3.1+ (TTF, OTF fonts)Ja see @font-faceJa see @font-faceJa 3.1+ (TTF, WOFF)Ja see @font-faceJa 3+Ja 2+Ja with flashJaJaJa
Google ChromeJa 4+ (TTF, OTF fonts)Ja see @font-faceJa see @font-faceJa 3.5+ (TTF, WOFF)Ja see @font-faceJa 1.0+Ja with flashJaJaJa
OperaJa 10+ (TTF, OTF, SVG fonts)Ja see @font-faceJa see @font-faceJa 10+ (TTF, WOFF)Ja see @font-faceJa 9.5+Ja with flashJaJaJa
iPhone/iPadJa (SVG font)NeinJaJa 4.2+ (TTF)Ja see @font-faceNeinJaJaJa
Embed
Compare web fonts alternative including text replacement solutions: @font-face vs sIFR vs typeface.js vs Cufon...
Webmaster
English
Public
Public
2020-10-30 14:34:40
View changes
Manage backups

User reviews and comments

  • madvic on 2013-10-12 13:15:58

    What is the faster solution (page loading) ? Quelle solution la plus rapide sur le chargement de la page ?