font-style

Avatar of Louis Lazaris
Louis Lazaris on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

The font-style property allows you to make text appear italicized (i.e. sloped, or slanted).

em {
  font-style: italic;
}

This property accepts one of three possible values: normal, italic, and oblique.

If a given font family has an italic or oblique face embedded, the browser will select that face. If no italic or oblique face is available, the browser will mimic the sloping effect. If italic is defined and there is no italic face available, the browser will look for an oblique face before it tries to mimic the italic. The same applies to oblique; it too will look first for an italic face.

To prevent the browser from adding a mimicked, or synthesized, version of the italic or oblique face, you may use the font-synthesis property (if supported).

Italic vs. Oblique

According to the spec, “Italic forms are generally cursive in nature while oblique faces are typically sloped versions of the regular face.” However, if the font being used does not have italic or oblique faces available, in most cases there is little, if any, difference between italic and oblique.

The demo below demonstrates both italic and oblique:

See the Pen Italic vs. oblique with CSS font-style by CSS-Tricks (@css-tricks) on CodePen.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Works Works