CSS font-style Property

Description

The font-style CSS property is used to specify the style of a font within a text element. It allows web developers to apply three main styles to text: "normal," which is the default style and renders text in a standard upright position; "italic," which slants the text to the right, giving it an inclined appearance; and "oblique," which also slants the text but is typically implemented as a faux italic when the actual italic version of the font is unavailable. Web designers use the font-style property to enhance the visual aesthetics and readability of text content on websites, helping to convey emphasis or convey a specific tone to the reader.

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

Interactive Demo

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

<p>The font is displayed in the usual style.</p> 
<p class="test">The font is displayed in italics.</p>
<p class="test2">The font is displayed as inclined.</p>
.test {
   font-style: italic;  
}
.test2 {
   font-style: oblique; 
}

Browser Support

The following table will show you the current browser support for the CSS font-style property.

Desktop
Edge Chrome Firefox Opera Safari
121171
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.1114.4

Last updated by CSSPortal on: 1st January 2024