The font-style property chooses a normal, italic, or oblique face from the current font-family.
Italic prefers a designed italic face. Oblique prefers a slanted face (or a slant of the regular face). If the style is missing, browsers often synthesize a slant — control that with font-synthesis. For meaning-based emphasis in HTML, prefer <em> over styling alone.
Not deprecated. Spec also defines left / right slant directions, but browsers do not support those values yet. Avoid long blocks of italic text for accessibility.
font-style: normal | italic | oblique | oblique <angle> | initial | inherit;The initial value is normal. For oblique, an optional angle from -90deg to 90deg sets the slant.
| Value | Description | Try it |
|---|---|---|
italic | Prefer a true italic face; fall back to oblique or a fake slant | Try it |
normal | Upright face. Initial value | Try it |
oblique | Prefer a slanted face (default slant about 14deg when synthesized) | Try it |
oblique <angle> | Oblique with an explicit slant, e.g. oblique 20deg | Try it |
initial | Resets to normal | Try it |
inherit | Uses the parent’s font-style | Try it |
font-stylePick the face you need, then apply it to the element that should change.
font-family that includes an italic face when you care about true italics (e.g. Georgia).font-style to italic, oblique, or normal.<em> and style that element if needed.| Piece | Required? | Role |
|---|---|---|
| Text content | Yes | Something visible to style |
normal / italic / oblique | Yes | Chooses the face |
| Italic-capable font | Recommended | True italic looks better than a fake slant |
| Optional angle | For oblique | Controls slant from -90deg to 90deg |
Change only font-style on the sample sentence. The font family stays the same.
Each snippet focuses on font-style. Use Try It Yourself for a live editor.
Use a designed italic face when the font provides one.
<style>
p {
font-family: Georgia, serif;
font-style: italic;
}
</style>
<p>This sentence is italic.</p>font-style: italic selects that face.Force upright text inside an italic parent.
<style>
p { font-style: italic; }
span { font-style: normal; }
</style>
<p>Italic text with a <span>normal</span> word.</p>italic, so children start italic too.font-style: normal on the span restores upright letters.normal is also what initial restores to.Request a slanted face and optionally set the angle.
<style>
p {
font-family: Arial, sans-serif;
font-style: oblique 20deg;
}
</style>
<p>Oblique text at 20 degrees.</p>20deg sets how far letters lean (valid range: -90deg to 90deg).If italic looks fake or hard to read, check these first.
MDN notes that large stretches of italic can be difficult for people with dyslexia and similar concerns. Prefer short emphasized phrases.
If italic/oblique is unavailable, browsers may artificially slant glyphs. Use font-synthesis to turn that off when you only want real faces.
left and right are not usable yetThe Fonts module defines those keywords for slant direction, but no major browser supports them. Stick to normal, italic, and oblique.
font can overwrite styleThe font shorthand resets font-style. Put font-style after the shorthand, or include the style in the shorthand.
font-style is a browser CSS property for choosing upright, italic, or oblique faces. Node.js, Deno, and Bun do not apply it.
normal, italic, and oblique work in all modern browsers and Internet Explorer. oblique with an angle is supported in current engines.
Bottom line: Safe everywhere for normal / italic / oblique. Prefer fonts with true italic faces for best quality. It is not a runtime API.
<em> for meaning; use font-style for looks.normal. Inherited by default.One line: font-style: italic; picks an italic face when the font provides one.
Explore small-caps and other typographic variant settings.
10 people found this page helpful