CSS font-style Property

CSS font-style Property

The CSS font-style property controls whether text is displayed using a normal, italic, or oblique style.

Italic and oblique text are commonly used to emphasize words, distinguish titles, or create visual contrast within text. The appearance of these styles depends on the selected font family and the font faces it provides.

font-style Syntax

The font-style property is followed by a value that determines which style of the selected font should be used.

p {
  font-style: italic;
}

This rule displays the text inside matching <p> elements using an italic style.

font-style Values

The three primary values for the font-style property are normal, italic, and oblique.

.normal {
  font-style: normal;
}
.italic {
  font-style: italic;
}
.oblique {
  font-style: oblique;
}

Italic and Oblique

Italic and oblique text can look similar, but they are not necessarily the same. An italic font is typically a separately designed font face with letter shapes created specifically for the italic style. An oblique style generally uses slanted letterforms while retaining more of the design of the normal font.

The visible difference between italic and oblique depends on the font family. Some fonts provide distinct italic and oblique faces, while others may not.

Oblique Angle

The oblique value can optionally include an angle that requests how far the text should be slanted.

p {
  font-style: oblique 15deg;
}

Positive angles slant the text in one direction, while negative angles slant it in the opposite direction. Whether different angles produce visibly different results depends on the capabilities of the font and browser font handling.

Available Font Styles

The result of font-style depends partly on the font faces available for the selected font family. A font family may include a specially designed italic face, an oblique face, both, or neither.

When the requested face is unavailable, the browser may synthesize a slanted version of another available face. This means the same font-style declaration can look different when used with different font families.

Inheriting font-style

The font-style property is inherited. Descendant text normally uses the computed font style of its parent unless another CSS rule specifies a different style.

article {
  font-style: italic;
}

Text within the <article> will normally inherit the italic style. A descendant can return to normal text by setting font-style: normal.

font-style Example

The following example uses the font-style property to display the paragraph text in italic. Open the example in the editor and change italic to normal, oblique, or an oblique angle such as oblique 15deg, then run the code to compare the results.

p {
  font-style: italic;
}