CSS font-style Property

CSS font-style Property – Complete Guide

The font-style property in CSS is used to specify whether the text should be normal, italic, or oblique.

1. Syntax

selector {
  font-style: value;
}

2. Property Values

Value	Description
normal	Default text style (not italic or oblique).
italic	Text appears in italics if the font supports it.
oblique	The text is slanted (simulated italics).
oblique <angle>	Allows you to specify an oblique angle (for variable fonts).

3. Example Usage

A. Normal vs Italic vs Oblique

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

<p class="normal">This is normal text.</p>
<p class="italic">This is italic text.</p>
<p class="oblique">This is oblique text.</p>

✅ The italic version is true italics, while oblique is just a slanted version of normal text.

4. Using oblique with Angles (Variable Fonts)

Some variable fonts support custom oblique angles.

p {
  font-style: oblique 20deg;
}

✅ This tilts the text 20 degrees.

5. When to Use italic vs oblique?

• italic → If the font has a true italic version, use this.
• oblique → If no italic version exists, the browser slants the text.

6. Combining with Other Font Properties

h1 {
  font-style: italic;
  font-weight: bold;
  font-size: 24px;
  font-family: "Georgia", serif;
}

✅ Italic, bold, large text with Georgia font.