CSS font-style Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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