Its because @font-face is CSS2 (http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-...) and has nothing to do with HTML5

Modernizr (linked at the bottom of my guide) can detect support for @font-face. It is decidedly non-trivial.

http://github.com/Modernizr/Modernizr

Thanks, and a note: under FFox3.5/Linux, I noticed a small delay before the title fonts (Agnes Nutter style ;-) loaded over something simpler. More interestingly, I cannot select the words "Appendix A" to copy elsewhere. I checked the source, and see they're in style ( h1:before{content:"Appendix A:"} ).

Curiously, under Konqueror 4.3 I can highlight those words, together with the rest of the title, but pasting (either X or ^c^v) also misses them ...

Ah, the oddities of CSS. The first issue is because I'm using custom fonts via @font-face. Firefox has made some... design decisions... that cause the effect you're seeing. I've actually just recently discovered a way to reduce the number of dynamic fonts I'm loading, but the underlying issue is still that Firefox wants to paint the page before the dynamic fonts are finished loading.

The second issue is CSS generated content. I honestly don't remember why I chose to put chapter numbers and appendix letters in CSS and the rest of the title in content. Purity? Really? That doesn't sound like me. ;-) It would probably be simpler to move it all into the h1.

But if it's not supported, the browser will just try the next font in the CSS declaration. Is there something cooler you can do with detection?

Some browsers don't support OTF fonts (like Android?) I can't seem to find a way to detect that short of getting into subtleties of WebKit revisions, but even that doesn't seem to denote support.

Surprisingly, this query returns almost nothing:

http://www.google.com/search?q=site:diveintohtml5.org+font