Modernizr not working properly (applying fontface class in IE8)

Question

Well I've had a fun-filled 24 hours. Since asking this question yesterday: http://tinyurl.com/nkoqxfg I've been trying to isolate the problem, and finally I've narrowed it down to the following:

Modernizr is incorrectly applying a class of fontface to the HTML element in IE8.

Here is my site, with everything else stripped away: http://tinyurl.com/ose6pj8

Please take a look at the source code. Notice the last two CSS rules:

nav li a {
  color: #FFF;
  font-size: 4px;
}   

.fontface nav li a {
  font-family: 'Qwigley';
  font-size: 30px;
  line-height: 56px;
}

In any modern browser that supports @font-face, you should see the menu styled with Google font's 'Qwigly' script, and the correct font-size of 30px. In IE8 and any browser that doesn't support @font-face, you would expect to see a tiny font-size of 4px. (Modernizr in this case should apply a no-fontface class to the HTML element)

However, this is not the case. Mordernizr is incorrectly applying the fontface class, and as a result I'm getting huge 30px Arial text. Just checked, and the same problem is occurring with IE7.

Why?

Answer 1

in IE8 and any browser that doesn't support @font-face, you would expect to see a tiny font-size of 4px. (Modernizr in this case should apply a no-fontface class to the HTML element)

IE 8 does support @font-face – so expecting Modernizer to not set that class is just where you are going wrong here.

The caveat is that IE < 9 only supports fonts in EOT format – so see to it that you embed that version in your font embedding as well;

Or use a CSS selector that applies your custom font only if the lt-ie9 class that you set for your html element via conditional comments is not present, something like

html:not(.lt-ie9) .fontface nav li a { /* … */ }

(IE only supports the :not() selector from v9 on anyway.)