Question

This is a demo website: http://reddledemo.wordpress.com (No, this is not a WordPress-related question.)

What I noticed is that the page’s content appears in ‘sans-serif’ font-family in all modern browsers (essentially the latest versions of Chrome, FireFox, Safari, Opera) except Internet Explorer (tested on IE9).

The ‘body’ tag has a defined font, which should automatically be applied to the menus and ‘p’ paragraphs as they inherit the style. But in the given example, this is not happening.

Looking at the CSS, I see no obvious issues, unless I’m completely missing something. So, what could it be? (This is the first time I’ve encountered such a bug.)

Answer 1

Okay this may sound stupid but the thing is, Internet Explorer 9, which happens to be the only browser to support rem aka root em font-size value in its family (older versions of IE), does not support the font CSS property when using rem.

Hence,

font: 1.3rem Verdana, sans-serif;

Should be presented as this (below) in your stylesheet:

font-size: 1.3rem;
font-family: Verdana, sans-serif;

It goes without saying that rem is supported only by a few modern browsers, and IE 9 is one among them (except for this bug).

PROOF OF CONCEPT (w.r.t IE9):

• This fiddle works fine & I’m not using rem : http://jsfiddle.net/SBrda/3/

• The same fiddle does not work fine when rem is uses instead of em : http://jsfiddle.net/SBrda/4/

• And when I break the font property into font-size and font-family properties, the above fiddle seems to render fine whilst using rem : http://jsfiddle.net/SBrda/5/

hope this will help 😀