Thanks for the pointer to the Code Styles resources! Their font stack builder is really helpful, and their data on font installs across platforms makes choosing fallback fonts much more data-driven. I added an update to the post so people can check it out.

Luke: W3Schools is *truly* a disgrace. It exists to fill a void between ignorance & clicking the first result in a search.

Where is the evidence for W3School’s list of websafe fonts? How do you know those are facts? Code Style’s at least has an open font survey that anyone can submit (pity it runs on Java Applet though).

A sacrilege?? That’s a bit strong isn’t it? W3Schools has done some pretty amazing work over the years – I realise that they may have fallen out of favour recently but I think they deserve some credit in terms of the work they have done – obviously you’ve forgotten how much of a nightmare it was before they existed??

As for the link you provided, it’s useless, considering it gives not indication of cross-OS compatibility anyway. A list of commonly installed fonts does NOT constitute a list of web-safe fonts.

Thanks! It all made sense after I read the previous posts about EVENTS & FOUT. I checked out your stylesheet and it then became crystal clear. I think it must have been my connection that displayed Georgia instead of Lapture. What a great example of your post!

That’s unusual. The fonts work as expected in my copy of Safari 5. It’s possible that you have a preference that’s disabling web fonts or JavaScript in that browser? You can shoot an email to support@typekit.com if you’d like.

I’m using the .wf-active class in my own stylesheet for the website, which in this case is at http://www.rimrockcollegeconsulting.com/styles.css . Check out the references near the top of the stylesheet.

How/where are you using the .wf-active class? Is it placed in the TypeKit stylesheet? I’ve tried something similar, but couldn’t get the browser to use the fall back styles.

Thanks!

-Steven

It seems a sacrilege for a respected blog to give credence to W3Schools. I think Code Style’s Most Commonly Used Fonts is a much better reference.

font-size-adjust is a part of the current CSS3 working draft, and it’s a great tool for matching the x-height (the height of lowercase letters) of a font with fallback fonts. Unfortunately, it’s only currently supported in Firefox. In addition, depending on your design, you may want to adjust more than just font-size when fallbacks are used. In my example, I also decided to adjust line-height. Font events work today in all browsers that Typekit supports and allow you to adjust any CSS property.