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?

Just curious why? The font designer had a much better idea of what he intended his font to look like in italic than the browser's kludging does. — user207421, Jun 14 '12 at 23:58
I'm working on converting a design to HTML/CSS and the designer used this Faux italic in a lot of places, and the italic implementation of the Font designer looks really different from just an slated version. — Marco Rivadeneyra, Jun 18 '12 at 03:05

score 7 · Answer 1 · answered Jun 14 '12 at 23:47

7

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

answered Jun 14 '12 at 23:47

biziclop

14,466
3
49
65

1

This works great for one-liners but when the text is larger than just one line for example on a paragraph it looks really weird. – Marco Rivadeneyra Jun 19 '12 at 01:29
Yes, it is quite a limited trick. For a longer block of text, every word should be wrapped to its own transformer, which is obviously less than ideal :) – biziclop Jun 19 '12 at 06:56

Jukka K. Korpela · Accepted Answer · 2014-08-30T20:24:20.467

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.

Thank you very informative answer, although it's a shame there is no way to successfully achieve this. I took @biziclop suggestion and added extra rules for browsers that do not support csstransforms, but IE fails to show the same result as the other browsers. — Marco Rivadeneyra, Jun 18 '12 at 03:11
This answer points to how to the principle (use a font without italic or oblique), but doesn't demonstrate how that is done, which takes more than a comment to show. — Jon Hanna, Aug 30 '14 at 14:45
@JonHanna, I don’t see what the problem is with that. There are many fonts that lack italic typeface, e.g. Arial Unicode MS. It’s just so that this won’t help if you have already decided which font to use. — Jukka K. Korpela, Aug 30 '14 at 17:27

score 2 · Answer 3 · answered Aug 30 '14 at 14:29

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/

This is an interesting point when web fonts can be used, since then you can effectively turn a font to one that does not have italic, hence “forcing” browsers to use faux italic. But when a font has been decided on, this helps only if you are able and willing to make it a web font. — Jukka K. Korpela, Aug 30 '14 at 19:43
@JukkaK.Korpela no, the first example here doesn't download any fonts, and the second just uses it as a backup to ensure a desired font is used if none on the list are on the system. There's no more need to have a downloadable font than there is in other cases (i.e., it depends on how acceptable font-substitution on the client is to you generally), bar the fact that a substitution being made outside of your requested list will also mean this doesn't work, while offering a downloadable font guarantees it works even then. — Jon Hanna, Aug 30 '14 at 20:12
Oh right, I see. So the point is that using `@font-face`, even just for local files, makes the browser treat a font as one that lacks italic, unless you explicitly specify italic version in `@font-face` rule of its own. I wonder how many people do this by accident. — Jukka K. Korpela, Aug 30 '14 at 20:21
@JukkaK.Korpela Yeah, we've told it about a "new" font called "Fake Oblique Font", and those two sources are the only two it knows about that new font (things might go different if there was actually a local font called "Fake Oblique Font") and we've told it that it's not italic or oblique, so the only way for it to make oblique is to fake it. As for accidental use, I've certainly done things like this accidentally, which is a reason for testing all `@font-face` declarations with bits commented out, leaving only one source and checking it either works correctly or not at all. — Jon Hanna, Aug 30 '14 at 20:29

score 1 · Answer 4 · edited May 23 '17 at 12:02

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.

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

4 Answers4

HTML

CSS