CSS font-style Property
The CSS font-style property sets the font style for a text. There are three options by using this property: normal, italic and oblique.
The CSS font-style property controls whether text is displayed upright or slanted. Its three keyword values are normal, italic, and oblique. It's the standard way to switch a run of text to a slanted style without changing the font family or weight.
This page covers what each value does, the practical difference between italic and oblique, the optional angle you can pass to oblique, and a common gotcha when a font has no real italic face.
Why slant matters
Slanted text is a visual cue readers recognize instantly: it signals emphasis, titles of works, foreign phrases, or technical terms. Reaching for font-style (rather than, say, manually skewing text) keeps that meaning encoded in CSS, so it stays correct across fonts, zoom levels, and assistive technologies.
There are two distinct ways type designers slant a letter:
- Italic is a separate, cursive design — the letterforms are redrawn, not just tilted. A true italic
aoften looks quite different from its upright counterpart. - Oblique is the upright design mechanically sloped by a few degrees. The shapes stay the same; they just lean.
When you write font-style: italic, the browser first looks for a real italic face in the font family. If the family doesn't ship one, the browser synthesizes a slant — which is essentially what oblique would produce. That is why, with many web fonts, italic and oblique look identical.
| Initial Value | normal |
|---|---|
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | object.style.fontStyle = "oblique"; |
Syntax
font-style: normal | italic | oblique | initial | inherit;The oblique keyword also accepts an optional angle from -90deg to 90deg, which lets you control exactly how far the text leans:
font-style: oblique 14deg;If you omit the angle, browsers use a default slant of about 14deg.
Example of the normal value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h3.normal {
font-style: normal;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<h3 class="normal">We wrote this text as normal.</h3>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>The difference between italic and oblique
As described above, italic requests a font's purpose-built cursive design, while oblique requests a sloped version of the upright design. When a font ships both faces the two can look noticeably different; when it ships only one, the browser falls back to synthesizing the other, so they look the same. The example below renders both side by side:
Example with the italic and oblique values
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<p class="italic">We wrote this text as italic.</p>
<p class="oblique">We wrote this text as oblique.</p>
</body>
</html>Example with all the values
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<p class="normal">We wrote this text as normal.</p>
<p class="italic">We wrote this text as italic.</p>
<p class="oblique">We wrote this text as oblique.</p>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| normal | Means that text characters will be normal. This is the default value of this property. | Play it » |
| italic | The text will be shown as italic. | Play it » |
| oblique | The text will be shown as oblique. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |
Common gotcha: fonts without an italic face
Not every font family includes a true italic. When you apply font-style: italic to such a font, the browser fakes the slant by skewing the upright glyphs. The result is usually acceptable but looks slightly less polished than a designed italic. If italics are important to your typography, make sure the font you load actually ships an italic file (for variable fonts, that the italic axis is present), and import that variant alongside the regular one.
To remove a slant inherited from a parent — for example, to keep a word upright inside an <em> or an <i> element — set the value back to normal:
em.upright {
font-style: normal;
}Related properties
font-style is one piece of a font declaration. These chapters cover the rest:
- CSS font-weight — controls boldness, the other common emphasis cue.
- CSS font-family — chooses the typeface, which determines whether a real italic exists.
- CSS font-size — sets the size of the text.
- CSS font — the shorthand that sets
font-style,font-weight,font-size, and more at once. - CSS text-decoration — another way to mark text, with underlines and lines.