November 2010

Retro Typography with Chrome Car Badges.

DesignersCouch presents a nice collection of chrome car badges, featuring some great retro typography.

October 2010

The comeback of the lettering brush.

It seems lately that there is a real interest in the ‘analog’ skill of hand lettering. Even though the digital design world’s best type designers are always improving the many styles and ligature options that today’s fonts can offer, there is always a need for something less refined, less clean and tidy—you know, real. LeightonHubbell explains.

U&lc back issues to be made available.

Great news for Typographers. Over the 26 years that it was pub­lished, U&lc gathered a fol­low­ing of thou­sands of avid read­ers that eagerly anti­cip­ated each issue. It became the most import­ant typo­graphic pub­lic­a­tion of its time. FDCblog are happy to announce that they will be mak­ing scans avail­able as down­load­able PDF doc­u­ments – and the files will be searchable. Get the first issues now.

Ultimate Web Font Resource Roundup.

In recent years countless tools and services have sprung up to meet the need of making the web a more type-friendly place, and they’re succeeding. DesignShack brings you a huge list of awesome websites for all things related to web fonts. You’ll find sites offering free fonts, web font services, font building tools, previewing utilities, and a lot more!

The Typographer’s Glossary.

Don’t know your ascenders from your descenders? Wanna know what a pica is? The folks at FontShop have made a handy glossary, a must for any designer/student/curious typophile! You’ll find a link at EatSleepWork.

A review of popular Web Font Embedding Services.

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 at SmashingMagazine 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.

[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]

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.

Fonts-11 in Review of Popular Web Font Embedding Services

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

Fonts-12 in Review of Popular Web Font Embedding Services

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.

Fonts-13 in Review of Popular Web Font Embedding Services

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-14 in Review of Popular Web Font Embedding Services

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.

Fonts-15 in Review of Popular Web Font Embedding Services

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.

Fonts-16 in Review of Popular Web Font Embedding Services

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-17 in Review of Popular Web Font Embedding Services

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.

Fonts-18 in Review of Popular Web Font Embedding Services

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.

Fonts-19 in Review of Popular Web Font Embedding Services

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.

Fonts-20 in Review of Popular Web Font Embedding Services

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.

Fonts-21 in Review of Popular Web Font Embedding Services

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.

Fonts-22 in Review of Popular Web Font Embedding Services

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

Fonts-23 in Review of Popular Web Font Embedding Services

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.

Andrew is the founder of Concept Feedback, a website feedback community for online professionals specializing in web design, usability, and marketing. Post a website, mockup, or landing page, and get quick, actionable ideas to improve performance.

Tags: , , , , , ,

Advertising

Design Templates

  1. 1
    0
    tripdragon

    October 20th, 2010 6:07 amDoes ANYONE offer Futura as a web font? Get on it please! Best font is best.

    • 2
      +5
      scottywic

      October 20th, 2010 7:08 amJust 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.

  2. 3
    +12
    Brett

    October 20th, 2010 6:10 amMy 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.

    • 4
      0
      Edgar Leijs

      October 20th, 2010 11:52 pmI’m a fan of Font Suirrel!

    • 5
      0
      Olie

      October 21st, 2010 2:27 amAgree! I love that site too :)

    • 6
      0
      ph1x

      October 21st, 2010 2:30 amMe either!

      • 7
        0
        Randy

        October 21st, 2010 4:51 amYes, I was shocked to not find fontsquirrel on this list! Great selection, VERY easy to implement, etc…
        But great list anyway, thanks!!

  3. 8
    +1
    Justin St. Germain

    October 20th, 2010 6:13 ammy favorite is Font Squirrel. maybe look into it for a review too.

  4. 9
    0
    Nagaraj Hubli

    October 20th, 2010 6:22 amI am surprised not to see font squirrel

    • 10
      -3
      Nagaraj Hubli

      October 20th, 2010 6:27 amcorrection 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

  5. 11
    +9
    Steph

    October 20th, 2010 6:26 amCall 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.

    • 12
      0
      jack parsons

      October 20th, 2010 3:00 pm100% 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.

      • 13
        0
        Andrei Gonzales

        October 21st, 2010 5:49 amRecurring fees happen if the service is a subscription only. Foundries such as Fontshop allow you to keep the typeface with a one-time payment.

  6. 14
    +7
    Maggie

    October 20th, 2010 6:31 amI 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. 15
    +2
    wideeye

    October 20th, 2010 6:31 amWhat about Cufon?

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

    Thoughts?

    • 16
      +3
      Aurimas

      October 20th, 2010 6:38 amWideeye – 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.

    • 17
      +4
      stk

      October 20th, 2010 8:22 am@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)

      • 18
        0
        Andrew Follett

        October 20th, 2010 9:38 amFontspring is Font Squirrel’s web font platform

        • 19
          0
          stk

          October 20th, 2010 10:41 amTrue, 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)

          ;-)

          • 20
            0
            Andrew Follett

            October 20th, 2010 11:36 amThanks! I’ll talk to the editor and see if we can make a note.

          • 21
            0
            Justin St. Germain

            October 20th, 2010 1:16 pmthat 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.

    • 22
      0
      Adam

      October 20th, 2010 3:08 pm@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.

  8. 23
    +1
    cb1

    October 20th, 2010 6:35 amI 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).

  9. 24
    +5
    mcnelismedia

    October 20th, 2010 6:44 amI would definitely add fontsquirrel.com to the list. Hundreds? of fonts, varying qualities, but free (desktop and web).

  10. 25
    0
    veerendra

    October 20th, 2010 6:52 amvery 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

  11. 26
    +3
    Chris Butterworth

    October 20th, 2010 6:53 amI 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.

  12. 27
    0
    Marilyne

    October 20th, 2010 6:55 amThere’s also fontsquirrel that is cool for @font-face kits!

  13. 28
    0
    Diego

    October 20th, 2010 6:58 amfontsquirrel Is very good too !!!

  14. 29
    +3
    Brittany

    October 20th, 2010 6:59 amYes, 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.

  15. 30
    0
    Borahm

    October 20th, 2010 6:59 amI havent tried any of these services…how is SEO working? Is the text still working with SEO and can I mark it as well?

    • 31
      0
      Andrei Gonzales

      October 20th, 2010 7:03 amNo change. The underlying HTML isn’t affected.

  16. 32
    0
    Andrei Gonzales

    October 20th, 2010 7:00 amYou 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.

    • 33
      0
      Catherine Azzarello

      October 20th, 2010 7:16 amAbsolutely!

  17. 34
    0
    mamikaze

    October 20th, 2010 7:01 amI LOVE http://fontsquirrel.com/fontface. All fonts are licensed commercial and free. Just download the kit zip file and you’re ready to go.

  18. 35
    +1
    Minnix

    October 20th, 2010 7:03 amI ♥ KERNEST

  19. 36
    +2
    Dmitry Scriptin

    October 20th, 2010 7:06 amI like Kernest – a lot of cyrillic fonts for free. Missed that Google has a cyrillic fonts already. Thanks!

  20. 37
    +2
    Catherine Azzarello

    October 20th, 2010 7:12 amI’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? ;-)

    • 38
      0
      Adam

      October 20th, 2010 3:15 pm@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.

  21. 39
    +2
    DesignerZak

    October 20th, 2010 7:13 amSorry, 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?).

  22. 40
    0
    slegolego

    October 20th, 2010 7:34 ami 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 …..

    • 41
      0
      Pedro

      October 21st, 2010 8:10 amThis 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?

  23. 42
    0
    Joseph Cohen – UX Designer

    October 20th, 2010 7:35 amWeb 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.

    • 43
      0
      Smacky

      October 21st, 2010 5:34 amI 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.

  24. 44
    -2
    Marcio BDA

    October 20th, 2010 7:41 amNo mention to fontsquirrel? It´s the best free font service!!!

  25. 45
    0
    Tony Mosley

    October 20th, 2010 7:46 amI 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.

  26. 46
    -2
    Justin

    October 20th, 2010 8:10 amhttp://fontsquirrel.com/

  27. 47
    +1
    ddsign

    October 20th, 2010 8:39 amWhat do you think about Cufon?
    http://ddsign.es/portafolio/utiliza-cualquier-fuente-en-tu-web.html

  28. 48
    +1
    Hillary Jones

    October 20th, 2010 9:02 amTypotheque 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.

  29. 49
    -2
    steve

    October 20th, 2010 9:08 amfont squirrel is the best! why is it not mentioned? haha

  30. 50
    0
    Heath Waller

    October 20th, 2010 9:10 amLike 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.

  31. 51
    0
    Kevin Dees

    October 20th, 2010 9:58 amGreat 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.

  32. 52
    0
    dskk

    October 20th, 2010 10:02 amThanks for the excellent post !

  33. 53
    0
    Tom Karels

    October 20th, 2010 10:12 amNice 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?

  34. 54
    +1
    Chris

    October 20th, 2010 10:20 amFont Squirrel and cufon is what I use…

  35. 55
    +1
    Niels Brahms

    October 20th, 2010 1:03 pmYou 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.

  36. 56
    +3
    Kain Tietzel

    October 20th, 2010 1:40 pmlol @ 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!

    • 57
      0
      Chris Adams

      October 21st, 2010 4:37 amNot 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

  37. 58
    0
    Steven Monetti

    October 20th, 2010 2:42 pmYeah 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!

    • 59
      0
      iNsAnE

      October 21st, 2010 2:27 amThanks for the tutorial. It’s exactly what I needed to do the first steps.

  38. 60
    0
    Adam

    October 20th, 2010 3:05 pmYou 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.

  39. 61
    0
    Jeff

    October 20th, 2010 7:44 pmGood 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.

  40. 62
    +1
    sannarts

    October 20th, 2010 8:22 pmNever tried it before, will try it on the new projects .. but nice collection & review, SM never failed to help others .. cheerss keep it up!

  41. 63
    0
    Ashish

    October 20th, 2010 9:42 pmAt 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!

  42. 64
    +2
    Designers X

    October 20th, 2010 9:50 pmI think Cufon is best to use!
    SEO, Custom Fonts & Browser supportive!

  43. 65
    0
    Brainnovative

    October 20th, 2010 9:59 pmThere’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

  44. 66
    0
    Andy Ford

    October 20th, 2010 10:11 pmHere’s a nice list of web font services http://bit.ly/webfontservices

  45. 67
    0
    Lane

    October 21st, 2010 12:00 amThis post should have a poll: a Smashing Mag, font face off.

  46. 68
    +1
    Joey den Braven

    October 21st, 2010 12:17 amThanks 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!

  47. 69
    0
    cb1

    October 21st, 2010 5:02 amWhere are the instructions for using a Font Squirrel font kit? I’m baffled. (but – in my defense – I’m easily baffled)

  48. 70
    0
    Garrett

    October 21st, 2010 5:36 amTypeKit 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.

  49. 71
    0
    Jon

    October 21st, 2010 5:52 amDon’t forget about the The League of Movable type, a collection of open-source fonts for the web: http://theleagueofmoveabletype.com/

  50. 72
    0
    Extension:103

    October 21st, 2010 7:13 amnice 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.

  51. 73
    0
    Andy Waldrop

    October 21st, 2010 8:10 amYour 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.

    • 74
      0
      Vitaly Friedman

      October 21st, 2010 8:25 amThanks, Andy. The article was updated.

  52. 75
    0
    Pedro

    October 21st, 2010 8:27 amThis 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.

  53. 76
    0
    Rebecca

    October 21st, 2010 9:09 amvery informative article, thank you!
    @Andrew…I’m a huge fan of conceptfeedback! great site.
    @ smashing, have you added more folks to the team?

  54. 77
    0
    MicrobrewMedia.com

    October 21st, 2010 9:38 amThanks for the resources! I am planning on using @Font-Face via Self Hosted option on our redesign. Can’t wait to finish it. I’ll post a link once it is up.

  55. 78
    0
    Heraclite

    October 21st, 2010 10:49 amDear 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.

Leave a Comment

Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel=”nofollow” is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

Visit job board Post your job

Advertisement

Wow, that’s some Unusual Typography.

Too often designers get caught in a typographic rut of sorts where they quit thinking outside of the box. The text in this gallery at FreelanceReview is treated in a number of ways you wouldn’t necessarily expect to see.

September 2010

How to Kern type perfectly.

There are lots of tips on the best way to perfectly kern a piece of type. As with all design, kerning can be subjective, but some is just plain right or wrong. TypecastCreative has a simply trick to kern your type perfectly.

Origins of the world’s Most Important Typefaces.

We see different fonts in magazines, print, advertisement, campaigns – even in text messaging. But have you ever given much thought as to how these unique fonts came to be? ChaCha provides a brief history lesson.

Expressive Web Typography: Useful examples and techniques.

SmashingMagazine have looked around the Web and checked some of the many typographic choices of website owners — some of which are successful, others not so much. They critique the typography on them, in order to explore how we can improve the type on our own websites.