Rotated text using Courier font not displayed in Opera

Question

I have the following HTML:

<div class='box'>text</div>​

and CSS:

.box {
    /* non-essential */
    display: inline-block;
    margin: 2em;
    background: plum;

    /* ESSENTIAL */
    transform: rotate(45deg);
    font-family: Courier;
}​

And this is the fiddle. I've omitted the prefixes here, but they are in the fiddle.

Expected result:

It is also the result I get in Chrome, Firefox, IE9, Safari.

However, in Opera it looks like this:

• If I take out the transform (that is, the div is not rotated anymore), then the text is shown.
• If I replace the font with another one, then the text is shown.

So why is this happening and what other solutions do I have?

In case this helps:

Answer 1

Why is this happening

It's happening because Opera has resolved Courier to courier.fon a bit-mapped font, and Opera has not implemented rotation for bit-mapped fonts.

You get the same results with Modern and Roman and any other font where you have a .fon version.

You can look in C:\Windows\Fonts for a complete list.

What other solutions do I have

If you are relying on the exact metrics of the font when it is presented on the page, you may want to consider using a web font.

If calling the font "courier" is important, then you could ignore opera: It's not very popular, this is a bit of an obscure bug, and since Opera is ditching Presto for Webkit, it simply involves waiting.