You should use the webfont provided here:
http://webfonts.fonts.com/en-us/Project/ChooseFonts#keyword%3Damerican%2...

Just uploading a commercial font to your website can get expensive:
http://blog.extensis.com/font-compliance/rick-santorums-website-using-pi...

Okay, so licensing issues aside (which admittedly I've not looked hard enough into the implications of yet), what's the difference between the webfont that you have linked to on fonts.com and the webfonts that I've embedded using the @font-face function? Even looking at the preview render on fonts.com it's not as smooth as the iphone render of my embedded typewriter webkit, and certainly not as smooth as the display in Illustrator or similar... Anyone able to provide any background on discrepancies between browser/output/etc?

Different combinations of browsers and OS and font settings (font format, font smoothing settings and hinting information) produce very different results.

In short:

For body copy to look good (sharp, readable) across browsers you need a well hinted (see end of paragraph) font with truetype curves. The worst environment is typically Win XP with default settings and non-IE browsers: extremely few fonts hold up here. Most web font services serve truetype curves, but the hinting quality (code helping to interpret curves as pixels on screen) varies wildly. In this case the good ones are far between because hinting is such a time consuming task.

For headlines to look good (smooth) across browsers, you need a web font with postscript curves and in some cases good postscript hinting. These are not commonly available yet, but Typekit has begun serving them for at least some fonts. Again, Windows is a causing trouble and doesn't support the use of postscript curves until IE9, so you'll need a font with truetype curves (.eot) as a backup, and it will look jagged! This backup should also have some light y-direction hinting (too specific for you, but this is for example the level of hinting typically served by Fontshop).

Thanks! I think I just about understand most of that...

So in short:

* Webfonts are still a bit hit and miss whatever your approach, due to different browsers/operating systems/combinations of both...

* At this point in time there is no completely failsafe method of getting your font to appear perfectly on all systems..?

Correct. With a little work you can get decent headlines in most cases. With a lot of work you can get decent text in most cases, but what constitutes decent text is not the same in all environments. And if "most cases" is acceptable to you is another discussion altogether.

For now this work needs to be done by the type designer. In the future, we'll most likely have better rendering engines that take care of the problem.

There are some good webfonts out there, you just have to look for them!