How to use Modernizr to detect if client supports WebFonts?

Question

How to detect Webfont support with Modernizr and push the Cufon instead if it doesn't? I am essentially using 90% of Google Web Font packages, the other 10% are the packages from FontSquirrel.

I want to rely on Webfonts if supported because those words are indexable and SEO friendly but if that's those are not supported I still want to render the right font which Cufon does great.

Answer 1

Basically every browser has @font-face support: http://caniuse.com/#search=font
So you really don't need a cufon fallback.

That said.. it's:

if (!Modernizr.fontface) Cufon.now();

But really, you don't need to use Cufon at all.

Answer 2

Paul was right in saying that even IE7 and IE8 support webfonts (they support .EOT webfonts) and it is a common fact that they do support it, I just didn't know why it wasn't working for me.

It turns out to be a problem with path rendering inside the CSS files. I was using SquishIt ASP.NET MVC plugin to minimize and bundle the CSS files.

When I include the stylesheet.css file from a FontSquirrel package in a SquishIt bundle, the support for .eot fonts will not work in browsers IE7 and IE8. After painstakingly testing this bug I discovered that both mentioned browsers will support .eot webfonts if the file was included separately (not in a SquishIt bundle) but will fail to display the correct font immediately when the CSS was included in the bundle.

Apparently SquishIt rewrites the paths to the files, rewriting (or encoding) the "?iefix" string also and thus making the old IEs fail to recognize the correct .eot file and fail to render the font correctly.