font-style

The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family.

Italic font faces are generally cursive in nature, usually using less horizontal space than their unstyled counterparts, while oblique faces are usually just sloped versions of the regular face. When the specified style is not available, both italic and oblique faces are simulated by artificially sloping the glyphs of the regular face (use font-synthesis to control this behavior).

Syntax

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;

/* Global values */
font-style: inherit;
font-style: initial;
font-style: unset;

The font-style property is specified as a single keyword chosen from the list of values below, which can optionally include an angle if the keyword is oblique.

Values

normal
Selects a font that is classified as normal within a font-family.
italic
Selects a font that is classified as italic. If no italic version of the face is available, one classified as oblique is used instead. If neither is available, the style is artificially simulated.
oblique
Selects a font that is classified as oblique. If no oblique version of the face is available, one classified as italic is used instead. If neither is available, the style is artificially simulated.
oblique <angle>
Selects a font classified as oblique, and additionally specifies an angle for the slant of the text. If one or more oblique faces are available in the chosen font family, the one that most closely matches the specified angle is chosen. If no oblique faces are available, the browser will synthesize an oblique version of the font by slanting a normal face by the specified amount. Valid values are degree values of -90deg to 90deg inclusive. If an angle is not specified, an angle of 14 degrees is used. Positive values are slanted to the end of the line, while negative values are slanted towards the beginning.

In general, for a requested angle of 14 degrees or greater, larger angles are prefered; otherwise, smaller angles are preferred (see the spec's font matching section for the precise algorithm).

Variable fonts

Variable fonts can offer a fine control over the degree to which an oblique face is slanted. You can select this using the <angle> modifier for the oblique keyword.

For TrueType or OpenType variable fonts, the "slnt" variation is used to implement varying slant angles for oblique, and the "ital" variation with a value of 1 is used to implement italic values. See font-variation-settings.

For the example below to work, you'll need a browser that supports the CSS Fonts Level 4 syntax in which font-style: oblique can accept an <angle>.

HTML

<header>
    <input type="range" id="slant" name="slant" min="-90" max="90" />
    <label for="slant">Slant</label>
</header>
<div class="container">
    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
</div>

CSS

/*
AmstelvarAlpha-VF is created by David Berlow (https://github.com/TypeNetwork/Amstelvar)
and is used here under the terms of its license:
https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt
*/

@font-face {
  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
  font-family:'AmstelvarAlpha';
  font-style: normal;
}

label {
  font: 1rem monospace;
}

.container {
  max-height: 150px;
  overflow: scroll;
}

.sample {
  font: 2rem 'AmstelvarAlpha', sans-serif;
}

JavaScript

let slantLabel = document.querySelector('label[for="slant"]');
let slantInput = document.querySelector('#slant');
let sampleText = document.querySelector('.sample');

function update() {
  let slant = `oblique ${slantInput.value}deg`;
  slantLabel.textContent = `font-style: ${slant};`;
  sampleText.style.fontStyle = slant;
}

slantInput.addEventListener('input', update);

update();

Accessibility concerns

Large sections of text set with a font-style value of italic may be difficult for people with cognitive concerns such as Dyslexia to read.

Formal definition

Initial valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

normal | italic | oblique <angle>?

Examples

Font styles

.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

Specifications

Specification Status Comment
CSS Fonts Module Level 4
The definition of 'font-style' in that specification.
Working Draft Adds the ability to specify an angle after oblique
CSS Fonts Module Level 3
The definition of 'font-style' in that specification.
Candidate Recommendation No change
CSS Level 2 (Revision 1)
The definition of 'font-style' in that specification.
Recommendation No change
CSS Level 1
The definition of 'font-style' in that specification.
Recommendation Initial definition

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
font-styleChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Before Firefox 44, oblique was not distinguished from italic.
IE Full support 4Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Before Firefox 44, oblique was not distinguished from italic.
Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
oblique can accept an <angle>Chrome No support NoEdge No support NoFirefox Full support 61IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 61Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support
Full support
No support
No support
See implementation notes.
See implementation notes.