Is there a way to detect whether a user's browser is supporting @font-face?

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 corr

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.