font-style

lets take a look at the font-style property

font-style is the CSS property that sets the font style of a text, whether they should remain normal, or become italic or oblique - depending on the font family availability.

taught by Tina May

font-style can be set to normal

Normal is the default font style that will apply if you haven’t set anything else.

font-style:

Tip: Normal font style is also referred to as “Roman”

Oh hey there fellas!

What's brewing, good looking?

You miss 100% of the shots you never take.

font-style can be set to italic

You can set the text to be italic (kind of like cursive). If there’s no italic version, the browser will artificially make the text italic.

font-style:

Tip: - When the browser makes the text artificially italic, more often that not it will look pretty ugly so check first if the italic version of your font is available.

Oh hey there fellas!

What's brewing, good looking?

You miss 100% of the shots you never take.

font-style can be set to oblique

You can make the text oblique (slanted or skewed to the right) depending on the font family availability.

font-style:

Tip: - While italic typefaces come with distinct letter shapes, oblique typefaces are simply skewed versions of regular fonts. If there is no oblique version, it will default to the italic version.

Oh hey there fellas!

What's brewing, good looking?

You miss 100% of the shots you never take.

explore all typography properties

Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.

color

font-family

font-size

font-style

font-weight

font

letter-spacing

line-height

list-style

text-align

text-decoration

text-indent

text-overflow

text-shadow

text-transform

vertical-align

word-spacing

Try it for yourself

HTML

<div>
  <h2>Oh hey guys!</h2>
  <p>What's brewing, good looking?</p>
</div>

Oh hey guys!

What's brewing, good looking?

CSS

/* Change the heading's font style*/

h2 { font-style: italic; }

/* Change the paragraph's font style*/

p { font-style: normal; }

reults

Try changing the font style of our heading and paragraph below, and give it emphasis by making it italic or oblique. Here we’ve included Open Sans font family from Google for you to play with.

Try these:

Copyright 2023