How to Set Font-Style in CSS: Simple Guide with Examples

Use the font-style property in CSS to change text style. You can set it to normal, italic, or oblique to make text appear plain, slanted, or slightly slanted.

Syntax

The font-style property accepts three main values:

• normal: Default text style with no slant.
• italic: Text is slanted to the right, usually used for emphasis.
• oblique: Similar to italic but less supported and slightly slanted.

You apply it to any text element in CSS.

css

selector {
  font-style: normal | italic | oblique;
}

Example

This example shows three paragraphs with different font-style values: normal, italic, and oblique.

css

html {
  font-family: Arial, sans-serif;
}

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

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

.oblique-text {
  font-style: oblique;
}

Output

<p class="normal-text">This text is normal.</p><p class="italic-text">This text is italic.</p><p class="oblique-text">This text is oblique.</p>

Common Pitfalls

Some common mistakes when using font-style include:

• Using values other than normal, italic, or oblique which are invalid.
• Expecting oblique to look exactly like italic. It may look different or not change at all depending on the font.
• Not having an italic or oblique font style available in the font family, so the browser may fake it or ignore the style.

css

/* Wrong usage example */
.example {
  font-style: slanted; /* invalid value, will be ignored */
}

/* Correct usage example */
.example {
  font-style: italic;
}

Quick Reference

Value	Description
normal	Default text style, no slant
italic	Text slanted to the right, used for emphasis
oblique	Text slightly slanted, less supported than italic

Key Takeaways

Use font-style to control text slant: normal, italic, or oblique.

Italic is the most common slanted style and widely supported.

Oblique may look different or not change depending on the font.

Invalid values for font-style are ignored by browsers.

Ensure your font family supports italic or oblique styles for best results.