Skip to main content
X

Explore your training options in 10 minutes

CSS Font-Style

Felipe Bohórquez - December 29, 2020


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.

Get offers and scholarships from top coding schools illustration

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.

Screen Shot 2020-08-22 at 4 42 19 PM

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!

Venus, a software engineer at Rockbot

"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

Screen Shot 2020-08-22 at 5 18 42 PM

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.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Felipe Bohórquez

About the author: Felipe Bohórquez is a Software Engineer and technical writer at Career Karma. He covers all things frontend and backend development.

Skip to main content