CSS font-style Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The font-style property controls which stylistic variant of a typeface is requested for rendering text — effectively telling the user agent to use the font face within a family that provides a slanted, cursive or otherwise stylistically altered set of glyphs intended for emphasis or typographic nuance. It is about selecting a designed variant from the available font faces (or asking the renderer to create a slanted look if no designed variant exists), so its effect is on which glyph outlines are chosen rather than directly changing the underlying characters.

When the property is applied, it participates in the font matching process together with the chosen font-family and any defined font faces. The browser or renderer will try to find a font face that best satisfies the requested stylistic intent; if a matching face is unavailable, the agent may fall back to a different face or synthesize a slanted appearance. Synthesized styling differs from a purpose-designed face in subtle ways (stroke contrast, terminals, spacing) and can affect legibility and tone, so designers should be aware that the visual result depends on available font resources.

Because switching to a different glyph set can change glyph metrics, applying this property can influence layout: different faces may have different advance widths, kerning, and vertical metrics, which can cause reflow or slight shifts in alignment. It also interacts with other font-related settings — for example, its outcome can be affected by the specified font-weight and by any use of the font shorthand — so changes to those declarations can alter which physical font file is selected. In practice, use this property when you want typographic emphasis or style variation while keeping in mind the possibility of fallback synthesis and metric changes.

Definition

Initial value: normal
Applies to: All elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.fontStyle

Interactive Demo

font-style: normal;

font-style: italic;

font-style: oblique;

font-style: oblique 40deg;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.

Syntax

font-style: normal | italic | oblique

Values

normalSelects a face that is classified as a normal face, one that is neither italic or obliqued.
italicSelects a font that is labeled as an italic face, or an oblique face if one is not.
obliqueSelects a font that is labeled as an oblique face, or an italic face if one is not.
inherit

Example

HTML

<div class="font-style-demo">

    <h2>CSS font-style examples</h2>

    <p class="normal">This text uses <code>font-style: normal;</code></p>

    <p class="italic">This text uses <code>font-style: italic;</code></p>

    <p class="oblique">This text uses <code>font-style: oblique 15deg;</code></p>

    <p class="emphasis">The <em>em</em> element typically renders as italic by default.</p>

</div>

CSS

.font-style-demo {
    font-family: Georgia, 'Times New Roman', serif;
    padding: 20px;
    max-width: 700px;
}

.font-style-demo h2 {
    margin-bottom: 12px;
}

.font-style-demo p {
    margin: 8px 0;
    font-size: 18px;
}

.font-style-demo .normal {
    font-style: normal;
}

.font-style-demo .italic {
    font-style: italic;
}

.font-style-demo .oblique {
    font-style: oblique 15deg;
}

.font-style-demo .emphasis em {
    font-style: italic;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS font-style property. Hover over a browser icon to see the version that first introduced support for this CSS property.