CODEWITHSUNDEEP
htmlcssfontstypography
Sophia_ES
Sophia_ES

Reputation: 1361

How to combine bold and italic in CSS?

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?

Upvotes: 53

Views: 121344

Answers (7)

epascarello
epascarello

Reputation: 207501

You should be using font-weight to set bold and font-style to set italics.

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

Upvotes: 1

Seniru Ranasinghe
Seniru Ranasinghe

Reputation: 1

You done small mistake by adding bold into font-style. Bold is under font-weight. Like below, (Order doesn't matter.)

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

Upvotes: 0

Lucifer
Lucifer

Reputation: 147

Hi, I had the same problem. I followed the above steps specified.

But, the above answer was not complete without importing a css file with the specified font style (bold italic). You have to have a .css which imports the font's bold italic style to actually display the desired effect.

This step is often overlooked and can be done very easily.

I'll demonstrate it here ( it's self explanatory but I will show it anyway)

I'll use Google Fonts here, and the specific font-family Lato.

  1. Go to Google-Fonts/Lato.

    Screengrab of Google-fonts/Lato.

  2. Tick Bold italic or the weight you want. Here I have selected 'Black' (font-weight = 900)

  1. And Finally Import it to you .css file like this

    @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,900&display=swap');

Upvotes: 0

Richard Hamilton
Richard Hamilton

Reputation: 26434

You were close.

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

Use:

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

Upvotes: 137

TylerH
TylerH

Reputation: 21098

font-style is a single-value property. bold is font-weight, anyway. To combine multiple values, you can use the shorthand font property. However, the font shorthand has required entries: font-size and font-family. If you don't include both of these in the shorthand, the property will be ignored.

Include these in your font shorthand along with italic bold and it should work.

Upvotes: 6

Weedoze
Weedoze

Reputation: 13943

You can have an italic and bold font using those 2 properties

font-style  : italic
font-weight : bold

font-weight doc : W3Schools font-weight

font-style doc : W3Schools font-style

Upvotes: 3

vignesh
vignesh

Reputation: 1011

Please have look at this code:

font: italic bold 12px/30px Georgia, serif;

Upvotes: 3

Related Questions