IE9 Bug with Increased Font-Size of CSS Content

IE9 bug with increased font-size of css content

You could try using rem instead of em, IE9 supports it, then your sizes will then be relative to the base font size instead of multiplying together. Here's a good explanation.

I would guess the difference here is that IE9 is treating the generated content as a child element while the other browsers aren't, hence the multiplication.

Trouble displaying fonts size properly in IE 9

The answer lies within your font-family declaration:

font-family: Bookman, serif;

If Bookman is not found, the browser falls back to the next available font in the chain. In this case you only have one fall back and that is set to serif.

The issue is that Firefox is falling back to its default serif font: Times New Roman, and IE9 is falling back its default serif font (which is different): Batang. You can sort this issue out by changing the declaration to something like:

font-family: Bookman, "Times New Roman", serif;

So now it would fall back to Times New Roman first, and if that font is not available then it will fall back to serif which will be the browsers default serif font.

IE9 not recognizing font-weight: lighter

This appears to be a problem with this specific font, or with the way Google makes IE use it. Your code works for other Google fonts with Book (300) font weight, like Lato and Open Sans.

---

Related Topics