Review of Popular Web Font Embedding Services

Advertisement

In the mid-80s the desktop publishing revolution began with the introduction of the Mac Plus, Aldus PageMaker and the Apple LaserWriter printer. It took quite a few years for these tools to make an impact on the design and publishing world, but once they did, there was no looking back.

In 2010 we see a similar revolution starting to take shape with web fonts. Even though @font-face was introduced in the CSS2 spec in 19981, it wasn’t until this past year that all in-use web browsers2 added support for it. This year we’re seeing a wave of web font services being marketed, and this could have a profound impact on web typography.

Web font services, like Typekit and now the Google Font API, have captured a lot of attention. But in the past 3 months there’s been an explosion of new services; services like Fonts Live, Fontdeck, Webtype and others with conjugated names involving “Font” or “Type”.

While all of these services are unique, they each provide a tool for web designers and developers to legally display professional fonts on their website. The guide below compares 10 of these services, breaking down the pros and cons of each. We hope this comparison will help you make a more informed decision on which service to use when you venture into the ever-growing, sometimes confusing, world of web fonts.

Typekit

Typekit, Inc.3 is a popular web font service from Small Batch Inc4 and founder Jeffrey Veen. Typekit was one of the first services on the scene and is currently one of the most widely adopted services on the market.

Typekit5

Font Selection
4000 (about half of these are through the Typekit library, and the other half via licensing arrangements with foundries who sell their own web licences)

Advantages Over Other Services
Strong platform integrations. Typekit is a scaled service, with well over 80 million unique users each month.

Pros
Extremely easy setup for designers and developers, allowing integration within minutes. Integration with Google Font API and blogging platforms including WordPress, Posterous and Typepad. The full font library is available via most plans for a single low price, allowing customers to try different fonts on one site as well as use different fonts on multiple projects. Now offering Adobe fonts6. Enterprise customers can self-host using their own CDN. The service allows you to host custom fonts. The simple free plan doesn’t expire.

Cons
Implementation requires JavaScript (although on the Typekit blog they list some reasons that JavaScript-based implementation has its advantages7). Fonts are not available for desktop use.

Pricing
Free trial account includes the use of 2 fonts on 1 website. Paid plans start at $24.99 per year (2 sites, 5 fonts per site). The more popular plans allow unlimited font usage on unlimited domains.

Fee Schedule
Annual subscription

Our Experience with Typekit

Setting up TypeKit is fairly straightforward. You just set the domains you want to use (the free trial site includes one domain and up to two fonts) and then build your Kit by adding fonts. A little JavaScript inserted into the header pulls in all the necessary CSS information. You can also reference the fonts in your own CSS, and use wild cards when adding to your list of allowed domains (e.g. *.domain.com will work on sub.domain.com).

As is the case with any web font service, there is a brief delay before the proper font is shown, but it’s barely noticeable. Since Typekit’s fonts are loaded via JavaScript, Typekit offers tools to control the loading process8, so delays are not as noticeable to the user.

Webtype

Webtype459 is a recent creation of The Font Bureau10, Ascender11, DevBridge2012, and font experts Roger Black and Petr Van Blokland. Webtype is all about quality and boasts “fonts for the highest quality online typography, including typefaces which were designed from scratch specifically for onscreen reading”.

Webtype13

Font Selection
365

Advantage Over Other Services
Font quality

Pros
Quick and easy setup. Flexible pricing. Ability to host custom fonts as well as self-host. JavaScript-free integration. Desktop license available.

Cons
Some fonts are expensive compared to other web font services.

Pricing
Free 30-day trial on all fonts. Fonts start at $10 per year per site.

Fee Schedule
Annual subscription

Our Experience with Webtype

Webtype was easy to set up and use from the signup process on. Just browse and purchase fonts (a 30-day free trial license is available for testing fonts) and then create projects. Select the font you want to use for each project and you’ll be given a link code and CSS selector for each font. Then you copy and paste them into your HTML and CSS files and you’re ready to go.

Make sure you click “Save” from the CSS resource page that gives you the code, or it won’t be live. Resource size is also given on this page, which can be helpful if you’re trying to estimate bandwidth usage. The load time for the font was possibly a bit slower than some of the other services here, despite the small file size of the font tested.

Fontdeck

Fontdeck4614 is a relatively new service by Clearleft15 and OmniTI16. It was conceived in March 2009 by Jon Tan and Richard Rutter as a way to bring quality fonts to a wide audience while levelling the playing field for type foundries. It went into private beta in January 2010 and was open to the public in June of 2010.

FontDeck17

Font Selection
600, with plans for this number to be doubled before Christmas.

Advantage Over Other Services
Only pay for the fonts you want to use. No bandwidth limit. Unlimited trial periods for all fonts (with a 20 IP address cap).

Pros
Easy to set up. Affordable options available. Automatically include similar style fonts in the font stack. Pure CSS with no JavaScript required.

Cons
No self-hosting option available. Fonts not available for desktop use.

Pricing
Some free fonts, but most start at $2.50 per year per site.

Fee Schedule
Annual subscription (which applies only to fonts on live web sites; as mentioned, all fonts have unlimited trial periods).

Our Experience with Fontdeck

Fontdeck was incredibly easy to set up. While it does require manual insertion of the CSS selectors into the stylesheet for your site (which is by design, to give designers as much control as possible), it provides the code for this immediately without the added step of setting up a stylesheet (the link is ready as soon as you select to add the font). Prior to purchasing the license, the first 20 visitors to your site can see the font.

I did find that I had to add the subdirectory to the hostname in order to get it working. But all the options and controls are located on a single page for each font, making it easy to update settings. Fonts are displayed quickly, but as with the other services, there is a split of a second when you can see the default font.

One added bonus from Fontdeck is that they include similar style fonts in the font stack, in case the user’s browser doesn’t support @font-face, and to help with the perceived change in text. Many of the other services just use the default font or a generic serif/sans-serif.

Fonts Live

Fonts Live4718 is a new web font service from Ascender Corporation19 — the company behind the “Droid” fonts for Google’s Android mobile platform, the “Segoe” family of fonts for Microsoft Windows, and the Ascender Fonts desktop font web store. Fonts Live is similar to Webtype (both were developed by DevBridge2012), however, Fonts Live serves fonts exclusively from Ascender and its partners.

Fonts Live21

Font Selection
499

Advantage Over Other Services
Font quality

Pros
Flexible pricing. Desktop license available. Option to self-host web fonts. Integration with Google Font API. JavaScript-free integration. Now offering Hallmark fonts22.

Cons
Some fonts are expensive compared to other web font services. Back-end was among the least user-friendly of the services featured here.

Pricing
Free 30-day trial on all fonts. Fonts start at $10 per year per site.

Fee Schedule
Annual subscription

Our Experience with Fonts Live

Setting up Fonts Live is a bit more labor intensive than setting up some others featured here. Setting up the service wasn’t without its bugs, either. First of all, read the documentation before you start, or you’re likely to get confused. With the first font I tried (Corsiva Italic), the site was unable to set up the resource and kept returning errors. It also created blank files for each of these failures, meaning I had to go in and manually delete them. Not sure if this was just an exception for that particular font or if it’s a more widespread problem. There was no mention of it in the site’s documentation.

I had better luck with the second font I tried (Romany). This time it created the resource without any issues. From there, you have to insert the stylesheet (“resource” in Fonts Live terms) link in your header and then insert the font family, style, and weight for whichever elements you want styled. The plus side here is that you don’t run into issues with your original stylesheet interfering.

Once it was up and running, however, it was noticeably faster serving the fonts than TypeKit, though this is likely due to smaller file sizes in the fonts used.

TypeFront

TypeFront23 is a hosting-only service which lets you upload a font you already own, as long as it has a web-friendly license (make sure you read the license agreement carefully!). Once you add the domain(s) you want to use, TypeFront provides you with the code to add to your website.

TypeFront24

Font Selection: N/A

Advantage Over Other Services
Ideal for do-it-yourself designers and developers who understand the ins and outs of web typography.

Pros
Inexpensive. No noticeable delay when displaying web fonts.

Cons
You must supply your own fonts. Requires a solid understanding of your font license agreement.

Pricing
Free plan offers 1 font and 500 requests per day. Paid plans start at $5 per month (Australian dollars) and include 10 hosted fonts and 5000 requests per day. 30-day trial on all paid plans.

Fee Schedule
Monthly subscription

Our Experience with TypeFront

Once you’ve signed up for an account, uploading fonts is simple. Just make sure the fonts you’re using have a web-friendly license. From this point you have to enable the format you’d like to use for the font (included are EOT, OpenType, SVG, TrueType, and WOFF — at least for the font I used). Once one of those formats is enabled, you have to add domains.

After you’ve enabled your formats and set up the domains you want to use, you have to copy the @font-face code into your CSS files and add the font to your font stacks. The big advantage TypeFront has over the other services listed here is that there is no noticeable delay before the correct font is displayed.

Fontspring

Fontspring4925 offers downloadable fonts for self-hosting. Unlike a hosted service, Fontspring provides downloadable font files and sample code to host web fonts on your own.

Fontspring26

Font Selection
1,937 families

Advantage Over Other Services
No recurring subscription fee

Pros
Large font selection. No recurring fees or bandwidth restrictions. Desktop license included.

Cons
Font quality varies. Self-hosting only, which requires additional setup and technical skills.

Pricing
Free or up to several hundred dollars depending on the font family

Fee Schedule
One-time fee

Our Experience with Fontspring

Because these are self-hosted files, it’s a bit harder to get everything set up properly than it is with the other services here. When you purchase and download a font that includes an @font-face license, the download package includes all the files you’ll need for web implementation, including the various font file formats like EOT and WOFF.

I found it easier to just copy and paste the stylesheet information included into the existing site’s stylesheet. Once that’s done, you need to make sure your fonts are loaded into the same folder as your stylesheet (or change the URL information in the CSS). Add the font to your font stack and you’re ready to go.

The speed at which the fonts loaded was roughly the same as for most of the other services here. The advantage to using this service is that you own a permanent license to the fonts, without any recurring annual fees and with no restrictions on bandwidth or traffic.

Fonts.com Web Fonts

Web fonts from Fonts.com5027 is a new venture from Monotype Imaging28, the largest font distributor on the web. Fonts.com currently has, by far, the largest web font selection with more than 7,500 fonts.

Fonts.com29

Font Selection
7,500+

Advantage Over Other Services
Large Font selection

Pros
Currently the largest selection of fonts on the web. Exclusive home to popular fonts like Helvetica, Frutiger and Univers. Support for more than 40 languages. Use on unlimited domains. Download up to 50 desktop fonts per month with the Professional plan. JavaScript-free integration available to Standard and Professional subscribers.

Cons
Relatively expensive on a price-per-font basis when using a limited number of web fonts. The font selection interface is slower than average.

Pricing
Various tiers ranging from free up to $500/month. With a free tier, you have the ability to use any of 2000 fonts on an unlimited number of websites (up to 25,000 page views). Standard and Pro tiers will give you access to any of over 7,000 fonts. All pricing is dependent upon page views.

Fee Schedule
30 days

Our Experience with Fonts.com Web Fonts

The service looks pretty straightforward. You set up a project with as many domains as you want and then select the fonts you want to use for that project. Selecting fonts is a bit slow (it takes 30 seconds or more for a font to actually be added to a project), but not enough to be prohibitive. There’s a huge selection of fonts and powerful tools for sorting through them, in addition to search capability.

From there, you have to enter each CSS selector for which you would like to use a web font and select the font used for that particular selector using a drop down menu that lists the fonts you already selected for the project. One place where Fonts.com really stands out is in the options you have for publishing your new web fonts. There are two different JavaScript options — an “Easy” option and an “Advanced” one — that let you add the fonts to selectors directly in your stylesheet rather than just through the web interface, as well as two non-JS options (also “Easy” and “Advanced”).

Again, the Fonts.com site was a bit slow overall but the end result is just as fast and seamless as any other service listed here.

Google Fonts

Google Fonts30, announced last May, represents Google’s foray into web fonts. Google offers the service free of charge. Although the selection is currently limited to certain public domain fonts, it has the potential to have a significant impact on the future of web fonts.

Google Fonts31

Font Selection
60 (including international fonts)

Advantage Over Other Services
Free

Pros
Easy to implement. Fast font loading. Google’s WebFont Loader lets you use their service with multiple web font providers.

Cons
Small font selection in the Google font directory. No support for iPhone or iPad (Mobile Safari). Now with support for iPhone and iPad (Mobile Safari).

Pricing
Free

Fee Schedule
N/A

Our Experience with Google Fonts

The Google Fonts API is probably the easiest of the services listed here to get started with, mostly because there is no sign-up process. You simply browse the fonts they offer, select one, and then get the code. Link the stylesheet in your website’s head, and then add the font to the font stack in your stylesheet.

The service is very fast, with only a barely noticeable lag before loading the proper font. The fact that there are no limits on usage of the service puts it among the top contenders on this list. The only major drawback is the limited number of fonts available.

Kernest

Kernest5232 is a hosted or self-hosted (you can also use Fontue, Kernest’s open source web font serving engine) web font tool that converts fonts into web font ready formats and sample code.

Kernest33

Font Selection
2,450

Advantage Over Other Services
Most fonts are free

Pros
Open source web font serving engine. Large font selection.

Cons
Self-hosting only, which requires additional setup and technical skills

Pricing
Free or up to $15

Fee Schedule
One-time fee

Our Experience with Kernest

Kernest has a great selection of free and paid fonts available. Free fonts could be set up without having to sign up for an account. Just find the font you want to use, make sure the permissions are acceptable for your intended use (not every font is allowed to be used on commercial sites, for example), and then copy and paste the link and CSS code into your files.

Kernest works as well as any of the others on this site, with minimal lag time before the fonts load.

Typotheque

Typotheque5334 is a graphic design studio and type foundry located in the Netherlands. Their hosted web font service includes a relatively small selection of Typotheque fonts. Typotheque was the first foundry to start its own web font service, and all fonts are designed in-house.

Typotheque35

Font Selection
37 font families, many supporting various styles and languages; this means there are over 500 single fonts.

Advantage Over Other Services
Use on unlimited websites

Pros
Option to purchase a full (web and desktop) license. Over 250 languages supported, and from those up to 5 languages can be embedded. All fonts are exclusive to and designed by Typotheque. Offers self-hosting for large websites.

Cons
Limited font selection (although this is only true because their fonts are exclusive) and monthly bandwidth (500MB for each font within a font family).

Pricing
20% of the full desktop license (ex. Fedra Sans Std Book: Full @ €90, Web @ €18).  Includes 500MB monthly bandwidth.

Fee Schedule
One-time fee (€5 for every extra GB over 500MB)

Our Experience with Typotheque

Setup is similar to the other services listed here. Just select the font you want to use and the domains on which it will be used, add the stylesheet link to the head of your page, add the font to your font stacks, and you’re ready to go. Lag time for the font to load is comparable to the other services. The biggest drawback is the lack of font selection, but as mentioned, this is due to the fact that their fonts are exclusive to Typotheque.

The service did return an error when generating the font subset, but it appeared to work fine, so not sure if that’s a bug or if there would actually be problems with more extensive testing.

WebINK

WebINK5436 is a hosted web font platform developed by Extensis37, a software development company based out of Portland, Oregon and specializing in font management.

WebINK38

Font Selection:
2,000

Advantage Over Other Services
Can be affordable for the right type of user

Pros
Affordable pricing structure (similar to Typekit). Decent selection of fonts. Offers access both through the usual web interface, or alternatively through a desktop font management application called Suitcase Fusion 339 (Mac and Windows). This application has a live website preview mode for testing different fonts, and something called QuickMatch that finds the closest match to the chosen font on your computer.

Cons
Confusing interface and back-end. Each plan is limited to 4 websites (Note: Each user can set up as many “Type Drawers” as they want, allowing 4 websites per Type Drawer; so really the number of websites is only limited to an individual plan within a single user account, whereas the number of Type Drawers is unlimited).

Pricing
Free 30-day trial on all fonts. Packages start at $0.99 per month (only includes “Promotional” font selection) for 1GB usage and up to 4 websites.

Fee Schedule
Monthly subscription

Our Experience with WebINK

We only tested the web interface for WebINK, not Suitcase Fusion 3. The WebINK online interface is probably more confusing than the others listed here. The service allows you to create an unlimited amount of Type Drawers to hold the fonts for your different projects. To add fonts from the library into your Type Drawers, you need to click the “add fonts” button within a specific Drawer. Going directly to the font library will not allow you to have direct access to your Drawers, so this takes some getting used to.

Once you get the fonts you want into your Type Drawer, setting them up on your website requires adding the @font-face information to your stylesheet and placing the fonts into your font stacks. The speed at which the font loads on the site is about the same as any other service.

Font-Face

Font-Face40 recently scrapped its project after the recent Google Font announcement. However, according to their website, they are “hatching a new plan” so we may hear more from them yet.

Font-Face41

How to Choose a Service

There is no “right” answer when it comes to choosing a web font service. Selecting the proper service usually depends on what you or your client need. You could ask yourself the following questions to help assess your needs:

  • How important is font selection? Are there specific fonts you need?
  • How important is font quality to you and your clients?
  • Do you require a self-hosting option?
  • Do you or your client have a budget? What type of fee structure would be ideal?
  • Is iPhone and iPad (Mobile Safari) support important?

Based on your answers to these questions you should be able to use the quick comparison chart below, along with the more detailed information above, to make an informed decision, or at the very least find a few starting points to start digging deeper (also be sure to check out the great chart @font-face face off42).

Screenshot43

Quick Overview

Here is a short overview of the services reviewed in this article, including the number of fonts in each, advantages over other services, price and fee schedule.

Service Fonts Advantage Over Other Services Price Fee Schedule
Typekit44 4000 Integrations Plans start at $24.99 Annual
Webtype459 365 Font quality Fonts start at $10 Annual
Fontdeck4614 600 Pay-per-use Free / $2.50 and up Annual
Fonts Live4718 499 Font quality Fonts start at $10 Annual
TypeFront48 N/A Do-it-yourself Plans start at $5 Monthly
Fontspring4925 1,937 families No recurring fee Free to $100s One-time
Fonts.com5027 7,500+ Font selection Free or up to $500 30 days
Google Fonts51 60 Easy to implement Free N/A
Kernest5232 2,450 Most fonts free Free or up to $15 One-time
Typotheque5334 524 Unlimited websites 20% of desktop license One-time
WebINK5436 2,000 Affordable Plans start at $0.99 Monthly

Summary

Web font services, like any relatively new popular technology, are complex and rapidly proliferating.  While there is no “perfect” service, it’s promising to see such a wide variety of companies entering the industry and continually raising the bar for web fonts. I hope this breakdown helps you get a better handle on what’s available. If you’ve had your own experience using a web font service, please let us know in the comments.

Related Resources

Disclosure: This article was co-written by Andrew Follett and Cameron Chapman. Andrew has provided consulting services for Ascender Corporation. Impressions were written exclusively by Cameron. All facts were checked and updated by Louis Lazaris.

Footnotes

  1. 1 http://www.w3.org/TR/1998/WD-css2-19980128/fonts.html#h-14.3.1
  2. 2 https://developer.mozilla.org/en/CSS/@font-face#Browser_compatibility
  3. 3 http://www.typekit.com/
  4. 4 http://smallbatchinc.com/
  5. 5 http://www.typekit.com
  6. 6 http://typekit.com/foundries/adobe
  7. 7 http://blog.typekit.com/2009/06/02/fonts-javascript-and-how-designers-design/
  8. 8 http://typekit.zendesk.com/entries/245989-controlling-the-flash-of-unstyled-text-or-fout
  9. 9 http://www.webtype.com/
  10. 10 http://www.fontbureau.com/
  11. 11 http://www.ascendercorp.com
  12. 12 http://www.devbridge.com/
  13. 13 http://www.webtype.com
  14. 14 http://www.fontdeck.com/
  15. 15 http://clearleft.com/
  16. 16 http://omniti.com/
  17. 17 http://www.fontdeck.com
  18. 18 http://www.fontslive.com/
  19. 19 http://www.ascendercorp.com
  20. 20 http://www.devbridge.com/
  21. 21 http://www.fontslive.com
  22. 22 http://blog.fontslive.com/2010/09/hallmark-fonts-added-to-fontslive.html
  23. 23 http://typefront.com/
  24. 24 http://www.typefront.com
  25. 25 http://www.fontspring.com/
  26. 26 http://www.fontspring.com
  27. 27 http://webfonts.fonts.com/
  28. 28 http://www.monotypeimaging.com/
  29. 29 http://www.webfonts.fonts.com
  30. 30 http://code.google.com/webfonts
  31. 31 http://code.google.com/webfonts
  32. 32 http://www.kernest.com/
  33. 33 http://www.kernest.com
  34. 34 http://www.typotheque.com/webfonts
  35. 35 http://www.typotheque.com/webfonts
  36. 36 http://www.extensis.com/en/WebINK/
  37. 37 http://www.extensis.com/
  38. 38 http://www.extensis.com/en/WebINK/index.jsp
  39. 39 http://www.extensis.com/en/products/suitcasefusion3/overview.jsp
  40. 40 http://www.font-face.com/
  41. 41 http://www.font-face.com
  42. 42 http://fffo.grahambird.co.uk/
  43. 43 http://fffo.grahambird.co.uk/
  44. 44 http://www.typekit.com/
  45. 45 http://www.webtype.com/
  46. 46 http://www.fontdeck.com/
  47. 47 http://www.fontslive.com/
  48. 48 http://www.typefront.com/
  49. 49 http://www.fontspring.com/
  50. 50 http://webfonts.fonts.com/
  51. 51 http://code.google.com/webfonts/
  52. 52 http://www.kernest.com/
  53. 53 http://www.typotheque.com/webfonts
  54. 54 http://www.extensis.com/en/WebINK/
  55. 55 http://fffo.grahambird.co.uk/
  56. 56 http://www.noupe.com/fonts/web-typography-font-embedding-services.html
  57. 57 http://www.paper-leaf.com/blog/2010/06/10-tools-for-better-web-fonts/
  58. 58 http://sixrevisions.com/css/font-face-guide/
  59. 59 http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
  60. 60 http://www.smashingmagazine.com/2010/09/13/expressive-web-typography-useful-examples-and-techniques/
  61. 61 http://opentype.info/blog/2009/07/29/why-webfont-services-are-the-future-of-fonts-on-the-web/
  62. 62 http://ilovetypography.com/2009/08/07/the-font-as-service/
  63. 63 http://inteldesigner.com/2010/code/web-fonts-foundries-evolved
  64. 64 http://www.alistapart.com/articles/on-web-typography/
  65. 65 http://www.freelancereview.net/ultimate-web-typography-resources-and-inspiration/

↑ Back to top Tweet itShare on Facebook

Andrew is the founder of Concept Feedback, a website feedback community for online professionals specializing in web design, usability and strategy. He also runs an explainer video service called Demo Duck as well as Video Brewery, a business video company.

Advertisement
  1. 1

    Your article is wrong about mobile Safari and the google font api. The sites I’ve built using the Google API work perfectly on the the iPhone and iPad. The fonts actually render better on the Apple iOS devices than in IE.

    0
  2. 154

    This technology is not ready to be used in real-life situations.

    See how the headers of this site look in my browser in Windows (FF 3.6, Win7):
    http://imgur.com/CNuMg

    This is unacceptable… Considering you have to pay for most of these fonts, it’s a rip-off.

    1
    • 205

      Have a look at Fedra Screen! And post Win Xp: the Webtype paragraph section and Fontfont webfonts. And of course the stuff I’m offering pretty soon.

      0
  3. 256

    very informative article, thank you!
    @Andrew…I’m a huge fan of conceptfeedback! great site.
    @ smashing, have you added more folks to the team?

    0
  4. 358

    Dear Smashing Magazine,

    I used to be an avid reader of your magazine from the start, but this is going too far. You can’t seriously promote the use of a technology inferior to what was used in the past.

    This was my last visit.

    -16
  5. 409

    There are a few good points raised here in the comments that I thought should be addressed.

    QUALITY – Everyone is used to the excellent quality of ‘web-safe’ fonts such as Arial, Georgia, Times New Roman and Verdana. These fonts had thousands of man-hours in development to make them look good in Windows. Unfortunately not every font is a good candidate to replace, especially at text sizes. Web designers and developers need to carefully consider what fonts they choose for text and headline sizes, and proof them in browsers on multiple platforms. We understand this issue and spend a lot of time tuning and optimizing all the fonts on our WebType.com and FontsLive.com sites, and further we categorize the fonts into recommended size categories.

    CHARACTER SETS – Again, the ‘web-safe’ system fonts in Mac & Windows all have extensive character sets including support for Western & Eastern Europe, Cyrillic, Greek, Turkish and Baltic. That is not the case for almost all web fonts, so designers need to review their language support needs and make sure the fonts they choose for their website provide appropriate coverage. Subsetting is a feature that many of the web font services offer: this lets you reduce the file size of the font by eliminating characters in the font for languages you do not need.

    FOUT – “Flash Of Unstyled Content” is what happens with web fonts when viewed in the Firefox browser. The fallback fonts are shown first, and then the downloaded web font is displayed causing a flash as the screen refreshes. This does not occur in other browsers (they leave the text area blank while the web fonts download). This typically only will happen on the first page for a website visitor, as subsequent pages that the user views will used the cached font. Also, how many days/weeks the font is cached locally will impact performance. There are techniques to reduce or eliminate FOUT, including the use of the WebFont Loader.

    BRANDING – for many websites, web fonts opens the door to finally being able to use the same fonts used in other media (including print) without having to convert headlines to graphics, or use hacks like sIFR. There are thousands of commercial fonts that were not available for use as web fonts until recently due to licensing restrictions. And there are still thousands more popular fonts that are still not available – but give it time. We have many customers asking us for fonts that are not ready for the web yet (see the point on quality above). Some fonts will need to be redrawn to work properly on screen. Or they need to be properly hinted. So be patient, as this is just the beginning of the web font revolution!

    6
  6. 460

    I’ve had trouble getting the fonts to look as good as these sites have in their demos. I’ve only tried Font Squirrel, and I guess the fonts weren’t ideal for use on the web. I was only able to make it look just ok at a medium-large size. At smaller sizes it became uneven and chubby.
    But I would really like to be able to make web fonts work instead of making sprites.
    Thanks for the article. Maybe some better quality fonts would do the trick.

    0
  7. 511

    Thanks for the great list…I’ve used Google Fonts and I must say it is awesome.

    There is another con to using Google Fonts that hasn’t been mentioned…not sure if this is from Google’s side or Microsoft…but try browsing the fonts from Google using IE9 Beta- it fails miserably.

    Any thoughts on this?

    0
  8. 562

    Thanks for sharing this post.I like this post.It contains good examples of web font embedding services.

    0
  9. 613

    What about cufon? lol & it’s free… http://cufon.shoqolate.com/generate/

    0
  10. 664

    why pay when you can do it for free ?

    first:
    @font-face {
    font-family: MyCustomFont;
    src: url(MyCustomFont.ttf) format(truetype);
    }

    then :

    body {
    font-family: MyCustomFont;
    }

    For support with IE, convert your ttf file to eot (you can use this for example: http://www.kirsle.net/wizards/ttf2eot.cgi ) and put a definition for it:

    @font-face {
    font-family: MyCustomFont;
    src: url( MyCustomFont.eot );
    }

    0
    • 715

      You can only do this if the font allows it in its license. Sure, you can do it and get away with it if no one notices, but technically speaking, it’s illegal to use fonts this way if the license doesn’t allow it.

      That’s what these services are for, to offer inexpensive ways to legally embed fonts in web pages.

      1
  11. 766

    The Google font api is weird, sometimes the fonts don’t even work in internet explorer or even Google Chrome! I show a solution to that problem here: http://bit.ly/chtPLJ

    0
  12. 817

    font squirrel ALSO has a feature that lets you upload fonts and then download a ready-to go web font ‘kit’ once their site converts them for you. works with either TTF or OTF fonts

    i’ve tried this with several fonts from adobe (that i purchased and have license to use) and it works well. ITC Avant Garde looks great on the web. :O

    1
  13. 868

    SOOO useful

    0
  14. 919

    @font-face will certainly be the standard BUT it’s not clean yet on all OS/Browsers… We have to wait. Example : If it’s clean on your Firefox with Win7 or Max OSX it’s certainly dirty on ie7 on XP. Unfortunately that’s includes most of visitors.

    0
  15. 970

    I’m more interested in just buying fonts with proper licensing so I can use them not just on my web projects but everything else I do as well. When I use them in web, then I just include them with stylesheets. Easy peezey.

    0
  16. 1021

    Great to see so many font services popping up. Hopefully more and more foundries will follow the likes of typetogether

    0
  17. 1072

    Thanks. Great article. Until now I had just tried out Google web fonts, which is quite limited, but now I have some great ideas to expand with.

    0
  18. 1123

    So, if I use Font Squirrel, can I host my web font locally, without having to use a hosting service? Where is the best place to keep the web font?

    Thx.

    0
  19. 1174

    Awesome article, this totally answered all my questions in terms of alternative font solutions. I personally I’m playing around with the Google font API but it’s awesome to k now my options.

    Thanks!

    0
  20. 1225

    I agree with the commenters who argue that @font-face is not a good solution (yet). The fonts look terrible in Windows browsers, and I haven’t found a good workaround for that, other than waiting for everyone to use IE 9, which will take years. I appreciate this list, however, and don’t feel the cost of any of these services seem unreasonable. That is, until you consider that your site can end up looking terrible for 60%+ of the users who view it.

    1
    • 1276

      Why not use conditional styling and exclude IE browsers from your @font-face fonts all together. Easily done with CSS and makes the experience better for those that have the capabilities and those that don’t won’t even notice. I find it funny that we’ve been talking about Graceful Degradation for years but people still refuse to utilize the idea.

      0
    • 1327

      Dan – I am a little surprised at the responses also. It seems everyone is jumping onto the “neat-o” bandwagon while completely ignoring the audience. A simple site stat look-up will tell everyone what browser and version is being used.

      And yes, Explorer is NOT the dominant browser anymore, however, many will be surprised that it still can make up as much as 35% to 50% of the user audience today.

      If anything, before you all go jumping into the kool-aid pool, simple UX processes dictate that one test it across the browsers your users will see your site on. If it flys on all of them without issue, then do it. If not… perhaps hold off for a bit longer.

      —-

      And yes conditional styling is a reasonable workaround, but a small thing to consider too… Is your group/client/etc OK with the font resetting to Arial after you’ve pitched them on the design? Is your web team saavy enough (design-wise) to consider the layout without the shiny new font? And to create a successful work-around?

      My point is with this last comment – fonts to me are a hollistic thing for layout, it just needs to fit in with everything overall.

      Fonts visually “resetting” might not be a big deal for a small site… but sites like Target or Amazon – though flush with resources and UX teams, weigh in the return on new design capabilities versus the effort to implement everyday. And even the most minute of complexities when applied to a larger, database driven, dynamic site is a lot of work and testing.

      2-cents and some perspective.

      1
  21. 1378

    Conjugation usually applies to verbs. I’m thinking what you mean is “portmanteau” which is the blending of two words into one.

    Cheers.

    0
    • 1429

      No. He meant conjugate, which means to join together or to couple. This is exactly what was done to create “Webtype” and “Fontdeck”, et al.

      I’m thinking what you mean is “compound word” which is joining two words together to form a new word, as in doghouse or dumbass.

      Portmanteau words are created by combining sounds or word parts from two or more words. Gaydar (gay, radar), JLo (Jennifer, Lopez), sexting (sex, texting) and Shroll (Shinn, troll) are portmanteau words.

      Cheers :-)

      1
  22. 1480

    Most of these font systems have poor anti-aliasing on the windows operating system. The only one i noticed that has very smooth rendering is Cufon.

    0
  23. 1531

    Great article. If you have the time I’d love your feedback on http://renderedfont.com. It uses an image substitution approach which I think is easy to use and bullet proof across browsers and platforms as well as protecting against illegitimate distribution of fonts.

    Although initially developed as a design tool, the rendered images are now delivered over a Google App powered CDN so it so can, and does, serve images to live sites.

    Cheers,
    Colin

    0
  24. 1582

    Font quality varies. Self-hosting only, which requires additional setup and technical skills.

    0
  25. 1633

    Recurring fees happen if the service is a subscription only. Foundries such as Fontshop allow you to keep the typeface with a one-time payment.

    0
  26. 1684

    I agree, Jack. I think subscription-based payment models are used because web technology makes it easy to do it. Services like Font Spring or My Fonts offer a one-time license fee which is similar to how typefaces are sold for print. Why not adopt a similar distribution model? I suspect that as the market matures we’ll move away from subscription-based plans.

    Great article by the way! I really enjoyed it. If anyone’s interested, I published a similar post the same day — coincidentally — with test pages of each service I reviewed. I’d love to have seen your tests in action. Here’s my post: http://blog.students.ubc.ca/communications/2010/10/20/web-font-services/

    Thanks too for the link to @font-face face-off. Cute and handy!

    0

↑ Back to top