What Is font-style in CSS?

The font-style CSS property accepts three values: normal, italic, and oblique, and oblique can take an optional slant angle (for example, font-style: oblique 14deg;). Its default value is normal, and it controls only the slant of text within a font-family. Weight and size belong to the separate font-weight and font-size properties.

The three values

• normal selects the upright face, with no slant applied.
• italic selects a face designed as italic. Italic faces are generally cursive in nature and usually take less horizontal space than the regular face.
• oblique selects a slanted face that is usually just a sloped version of the regular design, though some families include a purpose-designed oblique. Since CSS Fonts Level 4, you can also add an angle from -90deg to 90deg inclusive (for example, font-style: oblique 12deg;). Omit the angle and browsers use 14 degrees. Positive values slant toward the end of the line, negative values toward the beginning, and the browser picks the available oblique face closest to the angle you request.

How to use font-style

Apply it like any other CSS declaration. blockquote { font-style: italic; } renders every blockquote in the italic face of the current family. h1 { font-style: oblique 12deg; } slants headings by 12 degrees, using the family's closest oblique face or, if it has none, a synthesized slant of that amount. Because normal is the default, you only declare it to switch text back to upright.

font-style vs. the em element

They produce the same look for different reasons. The HTML em element marks emphasis as meaning, which assistive technology and search engines can read, and browsers render it italic by default. That default is why the two get confused. The font-style property changes only the appearance. So here's the rule: when the italics carry meaning, such as stressed words or a cited title, use semantic markup like em or cite. When the slant is purely a design choice, like an italicized pull quote, use font-style.

When the italic face is missing

If you request italic and the font family has no italic face, the browser substitutes an oblique one, and vice versa. When neither exists, the browser simulates the style by artificially sloping the glyphs of the regular face. The result, often called faux italic, leans the letters but lacks the redesigned letterforms most true italics carry.

You can control that in two ways. Load a real italic face with @font-face so the browser never needs to fake one, or set the font-synthesis property, which decides whether browsers may simulate missing faces at all. An extra italic file does add page weight, so if you go that route, our guide to optimizing web fonts shows how to load it without slowing the page down.