Cufon vs. @font-face

With support among all modern browsers for @font-face, it’s good practice to check out the benefits and deficits of one of the most popular font-replacing JavaScript libraries, and the purely CSS-based @font-face. We’ll run through some of the more defining reasons to choose between the two.

Before we compare a JavaScript-based replacement library and a pure CSS technique, it’s a good idea to figure out what your targeted user base will be for your developing website. If you are creating a site for users in Government sectors, healthcare providers, financial institutions, or similar professions, it may be best to consider only using @font-face, or no replacement techniques at all. Anyone working with the U.S. Government, with a computer in a national office, is required by law to use a browser with JavaScript disabled. This is simply a security setting, but will not affect many websites. Other areas in healthcare and financial businesses also follow this practice for security purposes.

Now, if your target user population is not in one of the few fields that typically disable JavaScript by default, then it’s time to start comparing. In this post, we will outline performance-based factors, visual factors that may impact the creative look of the different site, compatibility issues that may arise from either, and impacts of user-based settings.


Cufon font replacement:

Performance Cons:

  • Cufon is a JavaScript library, meaning it loads on the user’s browser, not the server itself. Depending on the amount of content on a page, and the speed of the users’ connection and computer itself, the users may experience a slight “flicker” with Cufon. This flicker is typically seen as the base font (such as defined in the CSS sheet if it’s different) is seen, and then converts over to the replacement font.
  • Because Cufon requires a JavaScript library to run, as well as another JavaScript file to reference the font itself, you add bandwidth (I’ve seen upwards of 500k for the font JavaScript file due to extra glyphs and higher DPI) for every font you will be replacing. This could be upwards of 2mb added to the pages if you use multiple fonts (this also depends on the design itself).

Performance Benefits:

Posted in PHP, Portfolio
  • Guest

    Law for prohibiting the usage of JavaScript. Never heard before. Which law is that?