Line25

Which Custom Web Fonts Solution Should You Use?

Read the full post

Over the past few years the number of fonts available for use in web design has dramatically increased. It wasn’t long ago that we all knew not to stray further than the basic Arial, Helvetica, Times, Georgia mix, but now there’s a range of services that allow the use of almost any font imaginable in your website design. This post rounds up the various custom web font solutions and looks at the pros and cons of each.

@font-face

@font-face

The most basic solution out of the lot is the CSS3 @font-face property. I’m sure we’re all familiar with @font-face by now, it allows you to load a font file from your CSS and apply that font to the styling of your HTML text.

Pros:

  • Powered by CSS. No Javascript or Flash
  • Completely accessible
  • Easy to implement without external plugins

Cons:

  • Limited to open source fonts

Links:

Google Web Fonts

Google Web Fonts

Since Google launched its Google Web Fonts API the service has grown to include hundreds of freely available fonts for use in your designs. The service was a hit from the start even with its small introductory collection, but now there’s a whole library of styles available it’s certainly one of the best custom font solutions.

Pros:

  • Powered by CSS. No Javascript or Flash
  • Completely accessible
  • Google hosted fonts are often cached and load very fast
  • Easy to implement through Google’s Web Fonts library

Cons:

  • Choice is limited to a range of free fonts

Links:

Typekit

Typekit

For those needing professional or classic fonts in their designs for corporate branding, Typekit is definitely the best solution. Unlike other free services, Typekit allows the embedding of popular premium fonts such as Futura, Meta and Cocon.

Pros:

  • Largest library of fonts, including classic typefaces
  • Service has been acquired by Adobe, which suggests it will be reliable
  • Easy to implement through Typekit’s online interface

Cons:

  • Premium service with a yearly fee

Links:

Cufon

Cufon

Nowadays Cufon is overshadowed by the larger custom web font services, but it was a pretty useful resource when it was first launched. Cufon is Javascript powered which makes it great for compatibility across older browsers that don’t support @font-face, but it comes with a few disadvantages of its own.

Pros:

  • Good cross browser support
  • Character set can be limited for a smaller file size

Cons:

  • Text is not selectable
  • Should only be used for headers, not body text
  • Limited to open source fonts

Links:

sIFR

sIFR

When sIFR was first introduced many years ago it was a groundbreaking addition to the web designer’s toolbox. Nowadays the Flash technology behind sIFR just isn’t up to par accessibility and performance wise when compared to the newer alternative soltuions.

Pros:

  • Almost any font can be embedded, including the classics
  • Text remains selectable

Cons:

  • Flash based technology is slow and heavy
  • Won’t work on Apple devices
  • Difficult to implement

Links:

Typeface.js

Typeface.js

Typeface.js was released as a viable alternative to sIFR and FLIR as it didn’t require any additional technologies such as Flash or PHP with it being entirely Javascript based.

Pros:

  • Good cross browser support
  • Easy to implement with a couple of Javascript links

Cons:

  • Outputs text as an image, which means it isn’t selectable
  • Should only be used for headers, not body text
  • Limited to open source fonts

Links:

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

54 Comments

  1. I tried Typekit and I'd have pay for it gladly, but unfortunately they supports unicode characters (mostly: í,ű,ő letters) less, i don't know why, anyway. I was told, that they didn't plan to expand their support . :(
    I think most of these font libraries' main fault is lack of unicode chars.

  2. *Sorry, I mistyped. :) They doesn't support unicode chars.

  3. Elliott the web design guy says:

    Google font library every time :-P

  4. greenboyroy says:

    I love Google Web Fonts, it has some awesome free fonts and you can shrink your font request down to tiny sizes by requesting just the letters you need!
    I usually just request the upper and lower-case alphabet with a few common special characters to get a file well below 10kb.

  5. Koko says:

    I still dont know which one is the best to use :(
    Sticking to @font-face for now

  6. ann says:

    another one is FLIR, just used it in my recent project

  7. Luca says:

    long live @fontface!

  8. David says:

    I usually go for Google fonts, it is frustrating that the fonts loose quality on windows machines though.

  9. Danny says:

    Howdy, this is a nice and concise roundup, however @fontface is by no means limited to open source fonts, many foundries offer web licences for their fonts.

  10. Dan says:

    Hi,

    Great run down of font techniques.

    When you say about Cufon, "Text is not selectable", could you explain further?

    I use it on a few sites and the text is selectable? Is this browser specific?

    Dan

  11. Polly says:

    @font-face FTW!

  12. Peter says:

    Another candidate to review : http://www.webtype.com/

  13. Johnny says:

    With Typekit, I think the biggest con for me is that you can't download the fonts for use in your desktop apps (unless you pay separately for them), which makes designing a lot more painful.

  14. siggi says:

    @font-face is the only one, working with AJAX dynamic loading

  15. I'm a big fan of Google fonts, they don't have a massive amount of free fonts but what they do have is good enough for me, it's quick and easy.

  16. ne-web says:

    @font-face for me (for now).

    Changing a website from using cufon to @font-face can improve the Google page speed score by at least a few points.

  17. Chris says:

    Typekit is great, I like the function that allows you to build kits and test the rendering. Although a 'Con' which you have not mentioned is it requires Javascript to work.

    I think it depends on the job. We use, Google, @font-face and Typekit.

    Fontsquirrel.com is a great resource for free @font-face kits.

  18. Kasia says:

    Thanks for the set. So far I used "Cufon" and it works very well. From what I see here, "Google" is very popular. Certainly, I try it next time.

  19. Hi Chris,

    nice review of the different type replacement techniques used in webdesign, well done.

    Maybe a point of warning concerning some of these techniques. Some of these techniques use javascript (e.g. cúfon) and/or flash (e.g. sIFR) to make stuff work.

    Watch out with these techniques cause your text will not be indexed in the SE's, because it's wrapped up in JS or Flash.

    That's why I always rely on @font-face and/or Google-fonts. But once again thanks for sharing this, Cheers & Ciao ..

  20. Jack Keller says:

    I've used @font-face mostly for easy of use and decent browser support. I tend to lean towards foundries that support font embedding if I plan on using/purchasing a typeface for a project.

    Great review on the differences too Chris, keep up the good work!

  21. Tom Hirst says:

    Google Web Fonts for me nowadays. The number of fonts is increasing all the time and they're all of decent quality.

    It's come a long way since I wrote about this topic last year: http://www.tomhirst.co.uk/custom-web-fonts-with-font-face-google-font-api-and-typekit/

  22. My fav is Typekit. I was an early adopter and have a pro account. Well worth every penny. That said, I also use Google fonts. They're getting better about including families with weight and style variants.

    Hopefully since Adobe acquired Typekit, we'll see some desktop integration (for comps) in future (like Extensis + Suitcase). I sure don't want such integration to depend on the font manager app, however. I'm happy w/FontAgent Pro.

    I will note that @font-face is NOT limited to free fonts. For instance, MyFonts (and other font sellers) now offer desktop and/or web licensing. This is perfect for when your design needs cover both print and web for client.

    The primary downside I see to @font-face as sold through MyFonts is that the web license scales per web views. How the designer of the site is supposed to know # of projected page views is beyond me. Should be a flat fee for web license.

    Overall, web fonts rock!

  23. Brad Dunzer says:

    Hi Chris,

    There are a few more services out there that do offer pretty much the same thing or even better than Typekit. Here is a comparison chart and some links. http://sprungmarker.de/wp-content/uploads/webfont-services/

    Self hosting — or as referred to here @font-face — is a option that is is available to all and some foundry's do offer this option. However, I there is a very powerful case for using a web font service over self hosting as the complexity of using fonts online is amazing.

    Take for instance the recent update by Typekit to offer some of its fonts in a WOFF/CFF or Postscript outline instead of WOFF/TTF. This simple change on specific fonts sent to a Windows browser can significantly improve rendering. Article here http://blog.typekit.com/2011/07/26/new-from-typekit-improved-font-rendering-on-windows/.
    This direction of offering up fonts formatted for a specific computer OS/Browser combination is powerful and the WOFF/CFF is only one of the many option web font services are looking to implement that self-hosting just cant match.

    Web font services can also offer features like subsetting, dynamic subsetting, hinting or even basic browser testing of each font on each browser version in its Beta status to insure that the internal working of a font has not run into a problem with a fonts.

    At our service we run into fonts at times that have improper settings or even naming conventions that can stop a font from rendering on browsers and due to our powerful scripts that check and test render our fonts we have the ability to catch these issues prior to becoming a problem in production. Case in point. We had a font a while back that had an issue with ligature replacement on Firefox (the only browser right now to support ligatures and OpenType features). In this case the word "better" was being turned into "beer". Now I like beer like the next person – especially a nice Porter – but we consider this a bug as I am sure you would as well. Due to our testing and investigation we found the bug in the font and could repair it and insure that "better" did not become "beer" except when it truly is beer.

    This is just one of many cases that we run into daily with fonts as they come from foundry's and are turned into web ready fonts that you can count on to display your text as you intended. So I always caution folks who tell me that they are happy with self-hosting and I try to share that web font services have a very powerful story to tell and are a lot more than just a link to a file.

  24. I go with a combination of both pay and free. Depends. This is like dressing up. it depends on the "occasion"

  25. philip says:

    Cufon for me, but i didnt realise its only for headers? oops. May i ask why not use it for body text? is there a problem with adjusting font size body text thed with at is in cufon?

    I got annoyed with @fontface and cufon is ever so sublime

  26. Daniel says:

    Does anyone use font deck?

  27. Miko says:

    Thank you for this review Chris, although I use font-face kits, I jump between GFonts and Fontsquirrel, I didn't know there were other options.

    Lately I've been using FS more because google api tends to fail regularly, and loading time gets madly slow. Although it's a space disk saver and easier to run than @f-f, I find more typography options and I feel like it depends only on my server.

    Thank you for the options, I will take a good look at them. =)

  28. Ian Oliver says:

    Honestly, with today's standards, I don't think Cufon, sIFR and Typography.js should even be considered. They were important steps towards 'real' custom fonts on the web, but plenty of good services exist which have far surpassed 'converted text as image or flash' techniques.

  29. aurel says:

    a very helpful review. there are few there that I have to used, I was lucky that I all fonts I needed to use in web I was able to use @font-face, as the license stated so. But I am going to try and play around with most of the above (apart from the old techniques, which we dont have much reason to use anymore)

  30. Rene says:

    I actually wonder if the con for the @font type is actually a con… Being 'limited' to open source does not have to mean anything bad at all, since the open source community is gigantic.

    How do you guys feel about this?

    • Danny says:

      Agree totally, there are a good number of quality open source typefaces out there. It's also not accurate as myself and others have noted.

  31. Should also be noted that Typekit performs terribly on mobile devices. As in it adds significantly to the load time, and at least in IOS 4 (could well be the case in 5, but I haven't tested so YMMV), fonts don't seem to ever be cached, meaning the load time increase is persistent.

    You should generally stick to CSS-only solutions such as Google Fonts or fontdeck.com. The latter has an excellent collection, by the way.

  32. Google's fonts are pretty good, but it would be nice if there were a list of typefaces which were similar to well-know ones.

    Also of benefit it that Extensis Suitcase Fusion 3 has just been upgraded to include Google Webfonts too :)

  33. HammHetfield says:

    I have to disagree here :

    For @font-face you don't need the font to be opensource, you need to have a license allowing you to use it that way, which is different, and it's way less restrictive than just opensource fonts.

    Other point I disagree with is for the CONS of Typekit : you don't get the font file unless you pay for it a second time, which is über lame, really costly and IMO not applicable in a common workflow where you design in Photoshop/Fireworks/whatever and then code it.

    I wouldn't even put Typekit as a solution, and if I did, I would have had the courtesy to put other similar services such as FontDeck and Webfonts…

  34. Jim says:

    I'd recommend also comparing WebINK for web fonts. They implement web fonts with a standard @font-face CSS call.

    Mocking up in CSS is easy with the Web Font Plug-in for Photoshop, so you don't need to purchase a desktop font to mock something up for a client.

  35. Brandon says:

    I had no idea that these services existed! Thank you for the intro as I smack myself upside the head repeatedly…

  36. @font-face for now, google fonts if it gets better…

  37. Also, @font-face doesn't need to be open source at all.. You just need ownership/permission to use a font.

  38. Aaron says:

    @font-face with a bit of Google Fonts thrown in for dramatic effect! We purchased a font for our website: http://www.a3mediauk.co.uk, @font-faced it, and it looks fine, but sometimes in different browsers it can get some rough edges. So if there are solutions to solve that via the others methods mentioned above I'd use them.

  39. i usually go with Google fonts

  40. Denny Dzul says:

    Many years ago, I used sIFR. Now, I use Google Web Fonts and occassionally, Font Squirrel.

  41. semanticppv says:

    Good to know custom web fonts should use on design.

  42. Scott Foley says:

    Google fonts every time. They load fast and the selection is ever growing.

  43. I agree Google fonts are definitely the way to go.

Sorry, comments are now closed