I recently revisited the CSS on Coder’s Block, just to keep things tidy and up-to-date. In the process, I made two seemingly innocent changes:

  1. Changed all font sizes from em units to rem units.
  2. Consolidated a few font properties by using font shorthand.

The end result was this:

font: 1.25rem/1 "Noto Sans", sans-serif;

No biggie. Or so I thought, until I checked my site in IE10. It looked like my site got beat with the Times New Roman ugly stick. Turns out there’s a bug in IE10 when using font shorthand with rem units. IE10 can’t parse it, so it disregards the entire line as invalid, leaving your site’s text looking pretty rough.

By the way, this only happens in IE10. It’s fixed in IE11.

The workaround is easy, though slightly disappointing. Don’t use font shorthand:

font-size: 1.25rem;
line-height: 1;
font-family: "Noto Sans", sans-serif;