text in rotated box not shown if font is Courier

by thebabydino

HTML

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

CSS

.box {
    display: inline-block;
    margin: 2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    /* get rid of rotation => text is shown */
    background: plum;
    font-family: Courier;
    /* replace Courier with monospace/ Arial/ etc => text is shown */
}