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 1998, it wasn’t until this past year that all in-use web browsers 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. is a popular web font service from Small Batch Inc 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.

Typekit

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 fonts. 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 advantages). 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 process, so delays are not as noticeable to the user.

Webtype

Webtype is a recent creation of The Font Bureau, Ascender, DevBridge, 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”.

Webtype

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

Fontdeck is a relatively new service by Clearleft and OmniTI. 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.

FontDeck

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 Live is a new web font service from Ascender Corporation — 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 DevBridge), however, Fonts Live serves fonts exclusively from Ascender and its partners.

Fonts Live

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 fonts.

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

TypeFront 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.

TypeFront

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

Fontspring 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.

Fontspring

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.com is a new venture from Monotype Imaging, 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.com

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 Fonts, 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 Fonts

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

Kernest 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.

Kernest

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

Typotheque 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.

Typotheque

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

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

WebINK

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 3 (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-Face 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-Face

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 off).

Screenshot

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
Typekit 4000 Integrations Plans start at $24.99 Annual
Webtype 365 Font quality Fonts start at $10 Annual
Fontdeck 600 Pay-per-use Free / $2.50 and up Annual
Fonts Live 499 Font quality Fonts start at $10 Annual
TypeFront N/A Do-it-yourself Plans start at $5 Monthly
Fontspring 1,937 families No recurring fee Free to $100s One-time
Fonts.com 7,500+ Font selection Free or up to $500 30 days
Google Fonts 60 Easy to implement Free N/A
Kernest 2,450 Most fonts free Free or up to $15 One-time
Typotheque 524 Unlimited websites 20% of desktop license One-time
WebINK 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.

↑ Back to top

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.

  1. 1

    Does ANYONE offer Futura as a web font? Get on it please! Best font is best.

    -4
    • 2

      Just use cufon. It’s crazy easy to install and you can upload your own futura. SEO friendly as well. http://cufon.shoqolate.com/generate/ . hosted type solutions are not really necessary though, at least that’s my thinking on the matter.

      8
      • 3

        I find that Cufon doesn’t work well with older fonts. When it does work, it’s wonderful… There’s been too many instances where the font I wanted to include wasn’t supported. If you’re gonna use Cufon, I HIGHLY recommend testing your fonts prior to presenting any mockups to a client. ;-)

        I’ve had the best luck with SiFR3

        1
        • 4

          I’ve not run into many problems with cufon apart from a line-height one that can be fixed by making the doc type xHtml 1.0 strict.

          SiFR3 is horrid in my personal opinion. I have run into alot of issues using sifr recently & in the past.

          0
        • 5

          I find that when I’m having trouble with an older font format in cufon, the instructions here (http://bit.ly/cYRyDb) are almost always useful in getting the font into a acceptable format.

          1
        • 6

          The way I see it, the problem is the font then.
          If you have a car, you can’t complain it’s not performing well with wooden wheels… ;)

          0
        • 7

          The way I see it, the problem is the font then.
          If you have a car, you can’t complain it’s not performing well with wooden wheels… if you really want to use these wheels, you gotta stick to a carriage ;)

          0
      • 8

        Using Futura with Cufon isn’t necessarily legal though. A hosted solution probably would be.

        4
      • 9

        Alberto Escamilla

        August 25, 2012 6:17 pm

        I used cufon so often, but just for titles and menus, not for paragraphs, to do that I use, google fonts is so easy to use, but does not work on IE, so is there an other FREE option?

        0
    • 10

      FontSpring has an extremely Futura-like family called Function Pro, which has a range of weights and styles: http://www.fontspring.com/fonts/fontsite/function-pro

      0
  2. 11

    My favorite web font site has got to be Font Squirrel – http://www.fontsquirrel.com/
    They have a great selection of web fonts you can download to use with @font-face.
    I highly recommend this site to web designers/developers and font designers. Plus the fonts are free and super easy to implement.

    31
  3. 18

    Justin St. Germain

    October 20, 2010 6:13 am

    my favorite is Font Squirrel. maybe look into it for a review too.

    1
  4. 19

    I am surprised not to see font squirrel

    1
    • 20

      correction for my own comment, font squirrel is not a font embedding service, but you can get lots of free fonts to use, through @font-face css3 property

      -3
  5. 21

    Call me cheap, but I’m not about to pay a yearly — not to mention monthly — fee for a font. I’d be willing to pay a one time cost, but monthly, no way. Google (even though their library is small at the moment) seems like they know what they’re doing. I’m also happy to learn that FontSpring has about 60 that are free.

    13
    • 22

      100% agree with you Steph. I’m sympathetic to foundries and typographers, because making a great body font is hard work and will never be as financially rewarding as it ought to be, but throwing on another recurring fee to the pile is not the solution, not for me anyway.

      I’ve got to believe that their target is ultimately ginormous corporations and/or platforms like Tumblr or WordPress, for whom a license to work with a gorgeous free theme would certainly encourage users to join up. For making a band website, or something for a small business, it’s hard to justify another expense that never ends.

      Also, it’s interesting to observe the way that some great fonts are now being overused to the point of fatigue, and what just a year or two ago might still seem fresh for a website is now extremely tired. Myriad is well on its way to becoming the new Verdana.

      0
  6. 23

    I always use the @font-face kits that Font Squirrel offers. They have a lot of choice and offer the kits with everything in it and it’s free.

    7
  7. 24

    What about Cufon?

    It’s free. You can use any of your own fonts. Javascript based. Pretty easy to implement.

    Thoughts?

    4
    • 25

      Wideeye – you actually can’t use commercial fonts via cufon without paying royalties. I mean you can, but you’re breaking the EULA and they can go after you.

      5
    • 26

      @WideEye – @font-face is easier than Cufón, doesn’t depend on JavaScript and is more future-proof.

      BTW Andrew, you didn’t cover the most useful (IMHO) font service – Font Squirrel (free and definitely worth a donation)

      4
      • 27

        Fontspring is Font Squirrel’s web font platform

        0
        • 28

          True, but why no mention of that in the article?

          I recommend adding, under “Pros” for Fontspring, the following:

          (a) not dependent on JS or Flash (more accessible);
          (b) no 3rd-party server dependencies (better up-time);
          (c) you can use your own fonts – copyright allowing – at the sister site (link) Font Squirrel (not limited to fonts on Fontspring)

          ;-)

          0
          • 29

            Thanks! I’ll talk to the editor and see if we can make a note.

            0
          • 30

            Justin St. Germain

            October 20, 2010 1:16 pm

            that is why i mentioned font squirrel in the first place. i love to take fonts that are not web standard that i use in my design and then convert them to web fonts so that i dont have to make sites graphic intensive just for nice fonts to be used. it is a great solution.

            0
    • 31

      @Aurimas

      What’s great about Cufón is that you can lock the JS files to a specific domain. Also, there are no real font files on the server for someone to steal.

      0
  8. 32

    I just got into trying a service with a recent web site. I do not know if this is the case with ALL services – but I had a hard time finding a font that looked clean at small sizes on TypeKit. Their site usability did not make it easy either. They almost need a “Clean at small sizes” category.

    Having said that – and abandoning using at Typekit font for my small font – the site was extremely easy to use and I did use it for larger font sizes. (IE seemed to be the issue with the smaller sizes).

    2
  9. 33

    I would definitely add fontsquirrel.com to the list. Hundreds? of fonts, varying qualities, but free (desktop and web).

    6
  10. 34

    very nice overview. Checked all out of which kernest and typekit look very promising. Portfolio package of typekit is really recommendable .. kernest is also very clear declaration of licenses & has very good collection too. currently I am using basic method of self hosting fonts at my web server. for that i would recommend fontsquirrel .. I have shared my thoughts on @font-face at http://bit.ly/cWIJK0

    0
  11. 35

    Chris Butterworth

    October 20, 2010 6:53 am

    I tend to use a lot either fontsquirrel.com which gives you bulletproof CSS3 coding for most browsers, failing that, I use typeface.js which is a simple and easy to use and install javascript font library.

    3
  12. 36

    There’s also fontsquirrel that is cool for @font-face kits!

    1
  13. 37

    fontsquirrel Is very good too !!!

    1
  14. 38

    Yes, there are many services popping up, but just like many of these commenters, I like to use FontSquirrel, which I’m surprised wasn’t on this list. It is has always worked and it’s simple and effective. This is a nice list of websites that I might check out in the future. However, I would never pay for a service for many fonts I already have.

    4
  15. 39

    I havent tried any of these services…how is SEO working? Is the text still working with SEO and can I mark it as well?

    0
  16. 41

    You guys forgot to mention that MyFonts.com already serves web fonts, so does Fontshop. However, you either self host or (in the case of Fontshop) have a 3rd party (like Typekit) host it.

    Also, I would be very careful with buying anything at businesses which don’t list that they are officially supported by the foundries. If they are of questionable nature, and the foundries go after them, your “license to font” may be completely invalidated.

    Stick with buying at the foundries, or the ones officially supported by them.

    0
    • 42

      Catherine Azzarello

      October 20, 2010 7:16 am

      Absolutely!

      0
    • 43

      Not to derail… but I had an awful experience with MyFonts.com. I made a purchase by mistake and they refused every attempt at a refund. I received no understanding from their customer service. Reputable companies will value their customers more than the $100 they took from me. I’d recommend getting your fonts from a different company.

      0
  17. 44

    I LOVE http://fontsquirrel.com/fontface. All fonts are licensed commercial and free. Just download the kit zip file and you’re ready to go.

    0
  18. 45

    I ♥ KERNEST

    1
  19. 46

    I like Kernest – a lot of cyrillic fonts for free. Missed that Google has a cyrillic fonts already. Thanks!

    2
  20. 47

    Catherine Azzarello

    October 20, 2010 7:12 am

    I’m a Typekit fangirl. For starters, their library is always expanding and the rendering engines improving.

    But mostly, I find Typekit to be the best value. I pay for my subscription once/year and forget about it. Doesn’t take much math to figure out that 5 fonts @ $10/ea. (each billed separately) is not as good a value at 6+ fonts @ $49 (billed once/yr.).

    Add that to Typekit’s ease of installation, secure licensing, broad selection of variable weights/typeface, and full CSS compatibility (vs. Cufon) and it’s a winner. Saves me time, which saves me money.

    All that, and I don’t have to be stuck in perpetual Arial/Helvetica stack land. :D

    I will add however, that the similar fonts font stack by Fontdeck is a sweet idea. How about it, Typekit? ;-)

    3
    • 48

      @Catherine A.

      Cufon is super EASY to “install” and use. Why should I pay for a font to use on my machine and then pay an additional monthly fee to use it on the net? What a wallet eater these paid font sites are.

      -2
  21. 49

    Sorry, but I am not on board the “continuous charge” train for using fonts online. It is great to see the web finally addressing typography, but the pricing model for almost all of these services is completely off. Foundries should get paid, but web sites need as few maintenance costs as possible.

    And any service that doesn’t include the desktop version for use in designing is a non-starter.

    I like Google and Font Squirrel as others have said (why is the latter completely missing?).

    1
  22. 50

    i usually go for Google, free, quick , although the choice is quite limited.
    Two questions:
    is there anyone else experiencing rendering issues on old windows machine (xp) using Internet Explorer 7 ? (text really grainy)
    I know there is a way to improve the rendering of the text on the OS, but i think not all the users are aware of that and want to change their settings only to see a website properly….

    second question: is iPad really out of the game for google font?
    i know the google documentation says “no iPad” , but i’m quite sure i saw one of my website decently on that tablet …..

    0
    • 51

      This is a huge disappointment for me… And this is the reason why I won’t use embedded fonts in the sites I develop.

      Having inconsistent rendering between platforms is a nightmare, and too many designers ignore this. Smashing Magazine uses these fonts, and it looks really bad in Windows; do they even know it?

      2
    • 52

      They look terrible because they’re not hinted* properly. The problem is good Win XP rendering require a LOT of work. You probably don’t realize it, but the core web fonts (Arial, Georgia, Times New Roman, Verdana) are most likely the most expensive fonts in the world in terms of production costs: the number of web fonts you see now wouldn’t be possible under those conditions.

      * Hinting is a code added to fonts telling the computer how to render them at small sizes.

      1
  23. 53

    Joseph Cohen - UX Designer

    October 20, 2010 7:35 am

    Web fonts on a windows platform with any other browser than IE9 will look terrible.

    Windows does not render fonts well…. they look pixelated and cheap.

    Fortunately IE9 resolves this and smooths the edges, but anything else… forget it.

    My website uses ‘Adelle Basic Bold’ , which is one of the few free slab fonts that almost looks acceptable on the windows platform… but unless you have hours to spend testing how various fonts hold up on Windows… we’re a bit premature to embed web fonts.

    2
    • 54

      I agree 100%.

      I see nicely designed websites that use web fonts and it makes the whole site look bad. It’s as if you exported text from Photoshop that had no aliasing.

      Things like web fonts and CSS3 are making designers make some very interesting/weird decisions.

      0
    • 55

      I totally agree with you, after using kernest for a couple of websites the fonts looked fine on my Mac and then I tested it on a windows machine. They looked horrible and ruined the website. So until PC’s do a better job, I’m sticking to web safe fonts.

      0
  24. 56

    No mention to fontsquirrel? It´s the best free font service!!!

    -2
  25. 57

    I was not too keen on using this ‘tech’ over existing replacement techniques until I heard about font-spring, not only can I increase my font repository for web AND PRINT work (with some really great faces)- but also at the same time acquire licensed fonts for unlimited use on websites… indefinately

    subscription services or per site licenses weren’t very attractive.

    I am excited about the potential and happy to pay but under my own terms.

    0
  26. 58
  27. 59
  28. 60

    Typotheque rules, it offers both print and webfonts for a single one time fee. And it includes OpenType features – small caps, etc. Maybe bit more pricey than the rest, as you have to pay per font, but you get your money worth.

    2
  29. 61

    font squirrel is the best! why is it not mentioned? haha

    -3
  30. 62

    Like many on here, I’m a big fan of Font Squirrel’s offerings. But after reading this article, Font Deck looks pretty appealing to me, too. Had no idea there were so many options out there!

    I really appreciate the way Andrew summarized his findings in tabular form at the end. It seems rare thing to find in articles, and it makes reading these types of reviews so much more rewarding.

    Great breakdown of the options, and a great article overall! Thanks so much.

    0
  31. 63

    Great recourse and information, as always. Justed wanted to tank you for recommending my site.

    I highly recommend typekit. They have some of the best tools to work with before deployment.

    0
  32. 64

    Thanks for the excellent post !

    0
  33. 65

    Nice round up!

    My only quarrel with @font-face is the brief second it takes to load and you get the blinking text of death. I’ve seen some work arounds for this but nothing definitive. And by looking at the examples above they all do this.

    I am actually OK with the blinking but a few of my clients didn’t like it so I was forced to either use images or an enhanced font stack for a solution. Which added to the development time.

    Anyone know if there has been any progress on this issue?

    0
  34. 66

    Font Squirrel and cufon is what I use…

    2
  35. 67

    You are forgetting in your review about Typotheque’s support of Non-Latin languages (Cyrillic, Greek, Arabic, etc), and OpenType features. I don’t think any other service does that.

    Typekit is very cool, great interface, but they don’t support languages I need (Lithuanian, Polish, etc).

    FontSquirrel is amazing, I wonder how those guys make a living when they offer so much, for free.

    Google has the advantage of their robust network, but I wish they offered more fonts.

    FontDeck, too little too late. No real benefit compared to other services.

    2
  36. 68

    lol @ the amount of mentions for fontsquirrel. Doesn’t anyone read the comments before posting?

    I can’t wait to start deploying @font-face type to our website publishing system but am concerned by the lack of IE6/7/8 support. Does anyone know any techniques to provide the basic font stack to IE 9- users?

    BTW, great post – it’s saved me a tonne of research time. Thank you!

    4
    • 69

      Not many people know, but @font-face has been supported by Explorer since IE4. It doesn’t work with .TTF or .OTF files, you need to provide a separate .EOT file for IE.

      All it takes is a bit of CSS trickery

      0
    • 70

      Yea, just use conditional rules/stylesheet to target IE.

      0
  37. 71

    Yeah If you have the font you can embed it very easily on your website using just css. I wrote a tutorial if anybody is interested at http://www.stevenmonetti.com/blog/how-use-any-font-your-website . Enjoy!

    0
  38. 73

    You know, this is really a pain. Not only does someone have to pay for the website’s design, build, web hosting, and maintenance, but now they may have to pay a monthly fee for using a special font(s)? Why pay for a font service when there are free methods? Font-face kits at Font Squirrel do work, but you need so many font files to make the fonts display correctly in IE.

    Why not use Cufón? ( http://cufon.shoqolate.com/generate/ )

    I have no trouble at all with using this in IE or any other major browser.

    -1
    • 74

      Hate so say it, Adam, but you’re really coming off as a shill for Cufon.

      I get it. You like it. I like it too. But comparing it with the subject of this article is kind of apples and oranges. Cufon is great as an alternative to sIFR, but it really does not solve the problems that @font-face solves, namely:

      - being able to use the font for body copy
      - being able to select text
      - Not being js-dependent
      - Standards-based and therefore unlikely to break in new browser releases

      3
  39. 75

    Good review, and thanks for the link to Paper Leaf’s article. Personally, we use @font-face and have a few go-to fonts we run with on the regular.

    0
  40. 76

    Never tried it before, will try it on the new projects .. but nice collection & review, SM never failed to help others .. cheerss keep it up!

    1
  41. 77

    At first I found Google Font very easy to use! Tried font squirrel after reading some of the comments above. It’s simply awesome! I was heavy cufon user. I’m going to move on to the font squirrel. Thanks to all, this post was extremely helpful!

    0
  42. 78

    I think Cufon is best to use!
    SEO, Custom Fonts & Browser supportive!

    2
  43. 79

    There’s another con of Typekit not mentioned here.
    Basically you can’t view all glyphs unless you add it to your website. Such a waste of time :/
    http://getsatisfaction.com/typekit/topics/no_polish_glyphs_and_letters_in_typekit

    0
  44. 80

    Here’s a nice list of web font services http://bit.ly/webfontservices

    0
  45. 81

    This post should have a poll: a Smashing Mag, font face off.

    0
  46. 82

    Thanks for the list. Always used Cufon – it’s freakin’ easy. This list makes me wonder what’s best to use besides Cufon… Wish I had the time to try them all!

    1
  47. 83

    Where are the instructions for using a Font Squirrel font kit? I’m baffled. (but – in my defense – I’m easily baffled)

    0
  48. 84

    TypeKit is by far the best. It’s not even worth looking at the others unless free is a requirement. $50/year for unlimited websites and so easy I can tell the designers to find their own fonts… nothing even comes close to beating the price and time savings.

    0
  49. 85

    Don’t forget about the The League of Movable type, a collection of open-source fonts for the web: http://theleagueofmoveabletype.com/

    0
  50. 86

    nice article, i do feel these services need to be offered for free. google is doing it and very soon they will be providing more fonts, so this period of paid sites will be short lived.

    0
  51. 87

    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
  52. 90

    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
    • 91

      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
  53. 92

    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
  54. 94

    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
  55. 95

    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
  56. 96

    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
  57. 97

    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
  58. 98

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

    0
  59. 99

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

    0
  60. 100

    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
    • 101

      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
  61. 102

    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
  62. 103

    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
  63. 104

    SOOO useful

    0
  64. 105

    @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
  65. 106

    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
  66. 107

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

    0
  67. 108

    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
  68. 109

    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
  69. 110

    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
  70. 111

    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
    • 112

      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
    • 113

      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
  71. 114

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

    Cheers.

    0
    • 115

      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
  72. 116

    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
  73. 117

    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
  74. 118

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

    0
  75. 119

    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
  76. 120

    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

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top