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!

☕ Buy a Coffee

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

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

<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>

CSS

.test {
   font-style: italic;  
}
.test2 {
   font-style: oblique; 
}

Result

Editor

Browser Support

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

Desktop

12	1	1	7	1

Tablets / Mobile

18	4	10.1	1	1	4.4

Last updated by CSSPortal on: 1st January 2024

Support Us