Question

I have some content on a web page that uses funny fonts to display correctly by using @font-face to use some custom fonts. I include a warning that it might not display correctly on all browsers. The content isn’t really essential to the page, so what I’d really like to do instead is simply not show it if the browser isn’t going to do it, due to browser version, script blocking, or whatever. Is there a way to do that?

Answer 1

Modernizr has this built-in. Here’s a link to a build that just checks for @font-face support.
http://modernizr.com/download/#-fontface-shiv-cssclasses-teststyles-load

Then you can check in JS for Modernizr.fontface or in the css for .fontface { }.

Here’s a fancy explanation of how to do it:
http://paulirish.com/2009/font-face-feature-detection/

To be clear you can pretty much support every browser with @font-face, except for some versions of Android.
http://caniuse.com/#search=font

Your bigger problem with @font-face isn’t the basic support for @font-face, but support for the specific font file type, which is more limited. I personally suggest to use WOFF, which works in IE9+. Alternatively, if you use Typekit or Font-Squirrel you can pretty much support all browsers out of the box.