How to combine bold and italic in CSS?

html css fonts typography
Sophia_ES picture Sophia_ES · Jul 5, 2016 · Viewed 66.5k times · Source

This W3Schools tutorial taught me how to use the CSS font-style property to make text bold (equivalent to <b&g>this</b> in old-fashioned HTML) as well as how to make text italic (equivalent to<i>this</i> in old-fashioned HTML).

However, I can't seem to find anywhere how to make text have both properties at the same time (equivalent to <b><i>this</i></b> in old-fashioned HTML).

Is there a way to do this using pure CSS?

I've tried this:

font-style: italic bold;

The result was that the page ignored both properties, and it was as though I never specified this property at all.

I got the same results when I tried this:

font-style: italic, bold;

I got a different result when I tried this:

font-style: italic; bold;

This time, what happened is that it used the first style given (italic) but ignored the second (bold).

Can this be done with pure css?

Answer

Richard Hamilton picture Richard Hamilton · Jul 5, 2016

You were close.

italic is used with font-style whereas bold is used with font-weight.

Use:

font-weight: bold;
font-style: italic;

Related questions

Font messes up alignment of numbers

I'm using the Raleway font, but this font doesn't align numbers properly with letters. You can see this in this snippet: Can I solve this easily? Or is this just a faulty font and should I chose another one?

Read More
How to add some non-standard font to a website?

Is there a way to add some custom font on a website without using images, Flash or some other graphics? For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. …

Read More
Using .otf fonts on web browsers

I'm working on a website that requires font trials online, the fonts I have are all .otf Is there a way to embed the fonts and get them working on all browsers? If not, what other alternatives do I have ?

Read More