This is a good argument for Progressive Enhancement and opting for CSS rather than JS web font options.

If you must use Javascript to load fonts, take advantage of the Google/Typekit Webfont Loader timeout property to kill the web fonts before they delay your site loading. The default is 5 seconds (!). At most I would recommend 2 seconds.

Furthermore you can see that the Javascript fonts, getting called after the page load, are forcing a browser redraw/reflow in these slowed down conditions, further delaying the use of the page. Again, killing the JS fonts earlier will prevent this. Fonts called through CSS, if loaded before the stylesheet, have fewer problems with FOUT and browser redraw.

Finally, another good link is this article on CSS Tricks.

The link to buy the book is here: http://smile.amazon.com/dp/0062303112

His facebook is also worth following, he posts new drawings pretty frequently https://www.facebook.com/NYCBASICTIPSANDETIQUETTE

Font rendering on the screen is a complex topic, one that I spend every day at my job tackling, and one that you could devote whole books or websites to... oh wait someone has: http://www.rastertragedy.com/

When it comes down to it, mac and windows have different philosophies about text rendering. Put simply, Windows, in most cases, requires the font itself to have instructions built inside of it to tell the operating system to put the pixels at each size. Most fonts designed for the screen will have these instructions—"hints"—like the "RE" fonts you will find on WebType, or the ScreenSmart fonts you will find on our own site, Cloud.typography. Other fonts, made for print or display sizes, might not. So it really comes down to picking a good text font if you want type to look good on both Mac and Windows.

Most sites offer a place on their site where you can see how their type renders in different browser/os combinations. Everyone should take advantage of those before committing to one font or another.