CSS Font-Style
With the
font-style
CSS property we can style our font with a set of characteristics in order to give emphasis to our text.
As always, checkout my Codepen so you can code-along with me.
font-style Syntax and Options
We have the following options when using
font-style
. Note, all of them are specified as keywords.

Find Your Bootcamp Match
- Career Karma matches you with top tech bootcamps
- Access exclusive scholarships and prep courses
By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.
font-style: normal; font-style: italic; font-style: oblique 30deg; font-style: oblique;
Font-style also supports some common global style keywords.
/* inherit from parent element */ font-style: inherit; /* browser's default */ font-style: initial; /* inherit if parent value, else initial */ font-style: unset;
The normal relates to the normal font within your specified
font-family
.
With oblique we can optionally specify the angle (-90 to 90) and if no angle is specified it will default to 14.
Note that oblique and italic can be interchangeable . This is because of browser support and if you are using a special font and if the browser doesn’t find or support oblique will use italic and so on.
Before using
oblique
, do check whether the oblique keyword is
fully supported
on your browser.
With that in mind, let’s go ahead and add emphasis to our h1 title:
h1.title { font-family: 'Tangerine'; font-style: normal; }
You’ll notice how we imported the Tangerine font from Google fonts, this font normal style is cursive so it is displayed as such.
For this particular font, making it cursive will slant it more, so we probably wouldn’t wanna apply.
Main Use of font-style
In most cases using the normal keyword is redundant. So the main use of the
font-style
property is to make the font italic to add emphasis.
In order to add emphasis to a paragraph, let’s make one of them italic.
p.par { font-family: 'Indie Flower'; font-style: italic; }
If you check out the Indie Flower font, you’ll notice it only has the regular (normal) style. In this case the browser itself is doing the sloping effect!

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
Conclusion
Using the
font-style
property is deeply linked with
font-family
. Also, until there’s better browser support of the
oblique
keyword, the main use of this property would be to add emphasis on fonts by making them italic.