I received a question from a client today:

Can I have special fonts show up on all browsers?  I know that was not possible some years ago, but I am tired of using Verdana, Arial, and Times Roman.

Here’s my answer:

Certainly, this is now possible. There are a few options for using uncommon fonts on websites:

  • TypeKit: a service you subscribe to. TypeKit will host all the Javascript necessary to render your fonts, plus they give you access to a large library of fonts you can use (no need to worry about licensing & legalities). For CSS3-supporting browsers (Firefox, Chrome, Safari, and sometimes Opera), the service uses the CSS3 propery font-face. In other non-CSS3 browsers (Internet Explorer), TypeKit uses Javascript to get the font to render correctly.
  • Cufón: this works by using Javascript to replace a textual element with a canvas element on which is rendered the appropriate font. The downside of this is that you cannot select the text drawn on the canvas element. Cufón is free and self-hosted. You need to make sure that the license for the font you want to use covers web distribution.
  • Google web fonts: Google’s hosted font tool. Like TypeKit, Google fonts uses the CSS3 propery font-face, falling back on Javascript if CSS3 is unsupported.

Using something like TypeKit to render all the text of a website can slow certain browsers/devices down a bit – you have to wait for the libraries to load and the scripts to run. However, for most platforms this is barely noticeable.

Any designer you’re working with should be aware of these tools, and any developer should be able to implement them.

, , , , , , ,


  1. Hi Tom,

    Yes browsers are coming along now that almost all of them support the @font-face CSS rule.

    For a full list of web font services this table is pretty well maintained http://sprungmarker.de/wp-content/uploads/webfont-services/

    Of course I am partial to WebINK as we are a CSS only solution and require no scripts.

  2. Thanks for the comment and summary link, Brad. Very useful!

add your comment now