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.
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.
81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.
The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.
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!
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.