Proper way to detect CSSFontFaceRule?

Is it window.CSSFontFaceRule or something else?

[JAB Creations]

I'm having difficulty finding the CSSFontFaceRule in the DOM in Opera though other browsers seem to work fine when accessing it via window.CSSFontFaceRule. Thoughts please?

- John

[rainborick]

I've been waiting for someone else to answer you, but since nobody has...

I hadn't seen CSSFontFaceRule before, and some brief searching didn't turn up any useful references. How is the property supposed to work? Wouldn't it be easier or more reliable to crawl the stylesheets or the .style property?

[lucy24]

It's new to CSS3. w3schools says, predictably,

Internet Explorer only supports .eot type fonts.

Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts.

That's before you even get to the stage of asking your java-thingie to look for them.

Even more depressingly, another site (I don't know if they're reliable so I won't link) says

In Internet Explorer, the rule object can only represent style rules. In Firefox, Opera, Google Chrome and Safari, it can represent both rules and at-rules, but in Firefox, Google Chrome and Safari not all types of at-rules.

Can't quite figure out if that means MSIE and all other browsers handle the issue in mutually exclusive ways, or that it doesn't work at all in MSIE. Anyway, we seem to be in "at-rule" territory. And it definitely lives in the CSS, so that's where you'd look for it.

[JAB Creations]

rainborick, my method of object detection...

if (window.CSSFontFaceRule || window.opera)

...which isn't all that great though it works. Opera supports @Font Face and only IE does not or at least properly. Older versions of Opera don't seem to complain in the error console at least sans try/catch.

lucy24, in regards to IE I would simply figure out what DOM objects to detect that didn't relate to CSSFontFaceRule if I wanted it to work in IE that badly.

The problem with things in JavaScript that aren't directly methods or properties is that they aren't well documented and poorly implemented if at all. I can live with the current implementation though I've come across some overly complex attempts by others that did not work. I prefer to leave a decisive working solution for issues I've come across because I know others will find my threads so the best solution I think others could try would be to simply create two classes and change the className in JavaScript. Thanks for the replies.

- John