@font-face vs Google Fonts vs Cufon

Question

So I've been forced by circumstances into using @font-face on a site I'm developing, and have to say I'm impressed by the cross browser render quality compared to Google Fonts but it does seem to have a heavy impact on http requests compared to Cufon, as you need four variants per font for body copy and sometimes a couple for headings.

I've generally worked with cufon as I've found it to be flexible, reliable cross-browser and mobile, and despite some odd white-space issues on occasion, easy to work with. I've not done much with the Google fonts as the render sucks in some browsers.

Obviously tech has moved on! How do these three differ, are there any serious pitfalls with any of the three?

Answer 1

I think there are two considerations to choosing between @font-face, browser defaults, and cufon.

1. How easy it will be for you to maintain the look of your site using CSS

When using a javascript solution for any part of the site, it's important (to me at least) that the site looks decent with or without javascript. This means if a user clicks 'stop' before the page finished loading, that the type will still be in its place within the design. This means having a fallback using default fonts. I've found this to be really problematic in the past as cufon fonts' line heights can differ drastically from those of regular fonts, making it necessary to write superfluous css to control for these cases plus cross-browser irregularities-- in short, a pain in the butt.

With @font-face, particularly using google fonts or typekit, the fonts are quality picked and display predictably and consitently well (with respect to layout and line-height) cross browser. For example you can switch from proxima-nova back to the default arial with no implications in layout-- I've found this to be a challenge with cufon.

2. How the user will need to interact with the site

I like to be able to highlight text, search for text, and see a text cursor when I hover over text. You can't do that with cufon. If your site is more information heavy, cufon isn't a good choice.

I would say Cufon is a good choice for smaller sites where the aesthetic is of equal importance to the content (as in the content simply won't have the same effect without eye catching typography that your user needs to maintain via a CMS... www.macretailsolutions.com is a site that I did with Cufon that I think falls under this category). Otherwise my opinion is that on both a maintenance/development perspective and a usability standpoint, it sucks.

It's definitely true that Cufon will render much prettier in IE, but the truth is that if people are using IE in the first place, they're not too concerned about aesthetics to begin with.

Conclusion: don't use Cufon.