CSS Reference Property

font-style

The font-style property allows the selection of either an italic or an oblique font style.

Most font families come packed with different font faces. The different CSS font properties allow us to select font faces from a list of available faces in a font family.

Italic forms are generally cursive in nature while oblique faces are typically sloped versions of the regular face.

Depending on the value of the font-style property, the browser will look for the corresponding face in a given font family and use it.

If the font family does not have an italic or oblique face, the browser will simulate or synthesize an oblique face by artificially sloping the glyphs of the regular (non-oblique) face. If you do not want the browser to synthesize an oblique or italic face, you can disable that using the font-synthesis property. Synthesized approaches may not be suitable for scripts like Cyrillic, where italic forms are very different in shape. It is always better to use an actual italic font rather than rely on a synthetic version. The following image shows the difference between an italic and an oblique face of a given font. Compare the artificially sloped renderings of Palatino ‘a’ and Baskerville ‘N’ in gray with the actual italic versions:

realvsfakeitalics
Real italic face vs. a synthesized oblique face. The First letter in each of the two sets is the regular face, the second one shows the synthesized oblique face, and the third one shows the real italic face embedded into the font.

If the font family does not have an italic face, the browser uses the oblique face, if it exists. Similarly, if the oblique face does not exist, it uses the italic face, if the latter exists. If none of these faces exist, the browser would synthesize an oblique font face, unless specified otherwise in the font-synthesis property.

Trivia & Notes

The details of the obliquing operation that the browsers use to fake an oblique font face are not explicitly defined in the specification. When an italic or oblique face is synthesized by the browser, only little, if any, difference between the two faces is noticeable; most of the times they look almost exactly the same.

Official Syntax

  • Syntax:

    font-style: normal | italic | oblique
  • Initial: normal
  • Applies To: all elements
  • Animatable: no

Values

normal
Selects the ‘normal’ font face of a given font family.
italic
Selects the italic font face of a given font family, if available.
oblique
Selects the oblique font face of a given font family, if available.

Notes

As mentioned earlier, if the font family does not have an italic face, the browser uses the oblique face, if it exists. Similarly, if the oblique face does not exist, it uses the italic face, if the latter exists. If none of these faces exist, the browser would synthesize an oblique font face, unless specified otherwise in the font-synthesis property.

Examples

p {
    font-family: "Open Sans", sans-serif;
    font-style: italic;
}
                

Live Demo

Have a look at the live demo:

View this demo on the Codrops Playground

Browser Support

The font-style property works in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

Written by

Last updated February 4, 2015 at 3:27 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.