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

I actually liked Biziclop's Answer the best, so I started messing around with this jsfiddle they provided. Here's what I came up with.

HTML

<p>Hello <span class="superitalic">SUPERITALIC!</span> World!</p>

CSS

p {
  font-size: 100%;
}

p span {
  display: inline-block;
  -ms-transform: skewX(-10deg) translateY(-1px);
  -o-transform: skewX(-10deg) translateY(-1px);
  transform: skewX(-10deg) translateY(-1px);
  font-size: 90%;
  opacity: 0.65;
  padding-top: 0.25px;
  -ms-text-shadow: 1px 1px 0.1px rgba(0,0,0,0.004);
  -o-text-shadow: 1px 1px 0.1px rgba(0,0,0,0.004);
  text-shadow: 1px 1px 0.1px rgba(0,0,0,0.004);
}

Resulting JSFiddle - http://jsfiddle.net/ttxhtks0/

I ripped the text-shadow resolution workaround from this post. Let me know if it holds up.

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.

Answer 3

You can do it by aliasing a font. This will only work if the font isn't substituted beyond those you suggest (the catch-all-of-type keywords like serif can't be used here), but you can guarantee that by using a web-font. The web-font may be used as a backup, so you don't need to always download it.

Let's try without a backup first:

@font-face {
  font-family: 'Fake Oblique Font';
  font-style: normal;
  font-weight: 400;
  src: local('Bell MT'), local('Georgia');
}
@font-face {
  font-family: 'Fake Oblique Font';
  font-style: normal;
  font-weight: 700;
  src: local('Bell MT Bold'), local('Georgia Bold');
}
*
{
    font-family: 'Bell MT Bold', Georgia, serif;
}
.oblique
{
    font-style: oblique;
    font-family: 'Fake Oblique Font';
}

In working out how the "Fake Oblique Font" works, the browser only has the forms mentioned in these declarations available. I don't have Bell MT available on my machine, but this does successfully use Georgia and Georgia Bold with a forced oblique style here: http://jsfiddle.net/k1w1zt0g/ In particular, the x is most appreciably different between the italic and the fake oblique.

Where this wouldn't work, is if none of the fonts mentioned are available, because local() declarations can't use the generic labels like serif. One can either decide to live with that (if you're falling back to serif then you're falling back from anyway, so you're already a bit off the design you were aiming at), or use a webfont guarantee. MS do license Bell MT for web use, but I'm not going to license it just to write a proof of this, so I'll use Noto Serif from Google Fonts instead:

Noto Serif is a handy choice her, as it provides a full set of normal, bold, italic and bold italic. This allows me to demonstrate a fuller range of changes. Delete the bold-italic font the code below uses and see the browser do more faking to fake that too, by faux-bolding the italic when it's used:

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  /* There are lots of pros and cons about just how you allow or disallow local fonts
     to be used. I'll go with allowing it here, to show it works throughout, but by
     all means change this to local('☺') to block local use, or so on. */
  src: local('Noto Serif'), local('NotoSerif'), url(http://fonts.gstatic.com/s/notoserif/v4/Lpe_acwQmwESv6cuCHE3rfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(http://fonts.gstatic.com/s/notoserif/v4/lJAvZoKA5NttpPc9yc6lPYSoAJ3FdnHwSRdilZRLja4.woff) format('woff');
}
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  src: local('Noto Serif Italic'), local('NotoSerif-Italic'), url(http://fonts.gstatic.com/s/notoserif/v4/HQXBIwLHsOJCNEQeX9kNzxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'Noto Serif Fake Oblique';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Serif'), local('NotoSerif'), url(http://fonts.gstatic.com/s/notoserif/v4/Lpe_acwQmwESv6cuCHE3rfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'Noto Serif Fake Oblique';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(http://fonts.gstatic.com/s/notoserif/v4/lJAvZoKA5NttpPc9yc6lPYSoAJ3FdnHwSRdilZRLja4.woff) format('woff');
}
*
{
    font-family: 'Noto Serif';
}
.oblique
{
    font-family: 'Noto Serif Fake Oblique'; /* Force faking, by only providing non-italic, non-oblique forms. */
    font-style: oblique;
}

http://jsfiddle.net/k1w1zt0g/1/

Answer 4

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);
​}

​