Force the browser to use Faux italic (oblique) and not the real italic

Question

I have read about a lot of people having problems with the browser not loading the real italic font-style, I on the other want to force the browser to use a Faux Italic. This is my css code:

h2 {
    font-family:"Bell MT", Georgia, serif;
    font-size:31px;
    font-style:oblique;
    font-weight:normal;
    color:#e19614;
}

When I set font-weight to bold or greater the resulting effect is the desired an oblique font but whenever I set the weight to normal (which is the desired setting) it goes back to the real italic font which in this case (Bell MT) is very different..

Any suggestions?

Answer 1

Ugly hack using css transforms:

http://jsfiddle.net/DQnVS/1/

span {
    display: inline-block;
 -webkit-transform: skewX(-30deg);
    -moz-transform: skewX(-30deg);
     -ms-transform: skewX(-30deg);
      -o-transform: skewX(-30deg);
         transform: skewX(-30deg);
​}

​

Answer 2

To force a browser to use faux italic, use font settings that request for italic or oblique when the font family specified does not contain an italic or oblique typeface, given the parameters of the situation.

You are doing this if you request for bold italic Bell MT. The Bell MT font family has normal, bold, and italic typeface, but no bold italic. So the browser has to refuse to do what you request for or fake it by algorithmically slanting bold typeface or by algorithmically bolding italic typeface.

As biziclop’s answer demonstrates, you can do your own fake (faux) italic, or rather fake oblique, using CSS transforms. But there’s no way to force a browser use its own faking mechanism in a situation where the requested italic or oblique is available to the browser.

Update: @JonHanna’s answer shows that browsers can be tricked into to using fake italic by specifying a font in a @font-face rule without specifying an italic typeface. So “is available to the browser” is relative.

P.S. Fake italic/oblique is not the same as oblique. A typographer can design an oblique typeface, as something that is not simply a normal font slanted but neither classic italic style. Whether a typeface is classified as italic or oblique is largely a matter of taste and naming. For most practical purposes, the CSS keywords italic and oblique are synonymous, as browsers use italic when oblique has been requested for but does not exist, and vice versa. They would be really different only when the font has both an italic typeface and an oblique typeface, which is rare.