Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Summary

The font-style CSS property lets you select italic or oblique faces within a font-family. Italic forms 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. Both italic and oblique faces are simulated by artificially sloping the glyphs of the regular face (see font-synthesis for control over this).

Initial valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Mediavisual
Computed valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

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

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

Values

normal
Selects a font that is classified as normal within a font-family.
italic
Selects a font that is labeled italic, or, if no italic version of the face is available, one labeled oblique is selected instead.
oblique
Selects a font that is labeled oblique, or, if no oblique version of the face is available, one labeled italic is selected instead.

Formal syntax

normal | italic | oblique

Example

The example shows the different font-style values. The CSS looks like this:

.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

Note that not all font have distinct faces for oblique and italic, if this is not the case, browsers are simulating the missing one by using the face that is present. An example of rendering of a font with both faces:

Specific​ations

Specification Status Comment
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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) [1] 4.0 7.0 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) [1] 6.0 6.0 1.0

[1] Before Firefox 44, Gecko didn't make a different between oblique and italic. Since then, it uses the correct face, if available.

Document Tags and Contributors

 Last updated by: Jdaggett,