font-style: italic vs oblique in CSS

Question

In the purest (type designer) sense, an oblique is a roman font that has been skewed a certain number of degrees (8-12 degrees, usually). An italic is created by the type designer with specific characters (notably lowercase a) drawn differently to create a more calligraphic, as well as slanted version.

Some type foundries have arbitrarily created obliques that aren't necessarily approved by the designers themselves... some fonts were meant not to be italicized or obliqued... but people did anyway. And as you may know, some operating systems will, upon clicking the 'italic' icon, skew the font and create an oblique on the fly. Not a pleasant sight.

It's best to specify an italic only when you're sure that font has been designed with one.

Generally, an italic is a special version of the font, whereas an oblique version is just the regular version inclined a bit. So both are slanted and related to the regular font, but an italic will have special letterforms made especially for it.

Most fonts have either an italic or an oblique version; I've never seen one that has both. (If you have an italic version, why bother with an oblique version?)

Oblique type (or slanted, sloped) is a form of type that slants slightly to the right, used in the same manner as italic type. Unlike italic type, however, it does not use different glyph shapes; it uses the same glyphs as roman type, except distorted.

Futher Reading: css font style oblique vs italic

As with italic and oblique, the same difference is visible when comparing italic with faux italic.

You will see faux-italics wherever a normal font is skewed with font-style: italic; whereas a true italic font is designed to be slanted.

The bottom of the two ll​s shows the difference clearly.

See Example

According to mozilla developer CSS tutorial :

italic: Sets the text to use the italic version of the font if available; if not available, it will simulate italics with oblique instead.

oblique: Sets the text to use a simulated version of an italic font, created by slanting the normal version.

From here, we deduce that if an italic version of the font is not available, both italic and oblique behave the same way. Since the W3Schools code snippet does not specify any particular font-family, I believe a default font is used; a default font which probably does not have an italic version.

But how to make an italic version of the font available?

This means that we have at least two versions of the same font, a "regular" one, and an italic one. These can be specified in the <style> section with the @font-face rule. Please read briefly : developer.mozilla, w3schools, tympanus.net. As you can see, the font is loaded as a file, which can have the following extensions: eot, otf, woff, truetype.

So far, i found two ways of linking the font file

absolute URL of the font file: (code snippet from tympanus.net)

`@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
 src: local('Open Sans'), local('OpenSans'), 
 url (http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

 @font-face {
 font-family: 'Open Sans';
 font-style: italic;
 font-weight: 400;
 src: local('Open Sans Italic'), local('OpenSans-Italic'), 
 url 
 (http://themes.googleusercontent.com/static/fonts/opensans/v8/
 xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff)
 format('woff');
 }`

Please notice that in both cases we have font-family: 'Open Sans', which basically defines the same font; but in the first case we have font-style: normal;, while in the second case we have font-style: italic;. Also note that the URLs point to different files. Now, going back to the w3schools code snippet, that's how the browser can distinguish between font-style: normal and font-style: italic

using the relative path to the font file : (code snippet from metaltoad.com)

Instead of defining separate font-family values for each font, You can use same font-family name for each font, and define the matching styles, like so:

`@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-R-webfont.eot');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-I-webfont.eot');
font-weight: normal;
font-style: italic;
}`

In this case, the .eot files must be stored in the same folder as the html page. Again, notice that the font-family is the same, the font-style is different, and also the urls are different: Ubuntu-R-webfont vs Ubuntu-I-webfont.

Example of an italic version of the font:

ctan.org :this is an example of how there are provided different files for different styles/weights of the same font. Neither bold or italic are computed on the spot, they are retrieved from their specific file.