Text

font-style

font-style sets whether text is slanted. You can choose the italic face (italic) or the regular glyphs slanted (oblique).

Syntax

normal | italic | oblique <angle [-90deg,90deg]>?

Preview

Aa
Presets
Drag the bottom-right corner to resize

Code

.box {
  font-style: italic;
}

Controls

font-styleitalic
font-style
Aa

About

Writing the value

  • normal: no slant. This is the initial value.
  • italic: uses the font's italic face. Italics are separately designed glyphs meant to be slanted, so letters such as a and f may have different shapes.
  • oblique: uses the regular glyphs slanted. The angle can be from -90deg to 90deg and defaults to 14deg. Positive values lean right and negative values lean left.

Fallbacks when the font lacks a face

If the font has no italic face, italic falls back to an oblique face, and if there is none of those either, the browser slants the glyphs itself. Most Japanese fonts have no italics, so Japanese text gets the synthesized slant.

How much of the oblique angle is honored depends on the font and the browser. A variable font with a slant axis draws the exact angle.

Watch out

  • em, i, cite and others are italic in the browser's default styles. Set font-style: normal to keep them upright.
  • The font shorthand resets an omitted font-style to normal.