3

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?

Matt
  • 84,419
  • 25
  • 57
  • 67
  • yes using : http://modernizr.com/ – mgraph Apr 26 '12 at 18:28
  • 2
    I can't imagine why this is necessary. @font-face has been supported since IE 4. (**4!**) – Chris Sobolewski Apr 26 '12 at 18:31
  • 1
    But if you have scripting turned off or NoScript doesn't allow the site, it won't do your @font-face. – Matt Apr 26 '12 at 18:45
  • Sorry, but if this is just to display "some content" that is not essential to the page, I think the use of webfonts at all is overkill. Creating an image would probably save bandwidth. – Mr Lister Apr 26 '12 at 18:49
  • Yes, if the content were static. This depends on input from the user. – Matt Apr 26 '12 at 19:07
  • [Duplicate that references a Modernizr-less way](http://stackoverflow.com/questions/7570211/detecting-with-javascript-whether-a-browser-supports-web-open-font-format-woff) – try-catch-finally Apr 05 '14 at 10:40

1 Answers1

6

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.

Jamund Ferguson
  • 16,721
  • 3
  • 42
  • 50