How to make the text font bold using CSS

To make a text with a bold font using CSS, you need to apply the font-weight property to the text you want to make bold.

The font-weight CSS property determines the thickness of the text characters when it’s applied to HTML elements.

The thinnest font starts at font-weight:100 and the thickest font ends at font-weight:900.

The numbers value that you can use with the font-weight property are as follows:

• 100 - The thinnest font style
• 200 - The extra light font style
• 300 - The light font style
• 400 - The normal font style. This is the default font weight when you don’t specify any
• 500 - The medium font style
• 600 - The semi-bold font style
• 700 - The number for bold style
• 800 - Extra bold text
• 900 - Heavy black style

Additionally, you can also specify bold or normal as the value of font-weight property to set the weight to 400 and 700.

The following should be enough to make a bold paragraph:

<p style="font-weight:bold;">
  Hello, this is a paragraph with a bold font style
</p>

Additionally, you can create reusable CSS rules where you specify each font-weight size as its own class selector as shown below:

.w-bold {
  font-weight: bold;
}

.w-normal {
  font-weight: normal;
}

.w-100 {
  font-weight: 100;
}

.w-200 {
  font-weight: 200;
}

.w-300 {
  font-weight: 300;
}

.w-400 {
  font-weight: 400;
}

.w-500 {
  font-weight: 500;
}

.w-600 {
  font-weight: 600;
}

.w-700 {
  font-weight: 700;
}

.w-800 {
  font-weight: 800;
}

.w-900 {
  font-weight: 900;
}

Now you can add the appropriate class anytime you need to make a text with different weight:

<p class="w-700"">
  Hello, this is a paragraph with a bold font style
</p>

When the font used by your HTML document has no bold style, then the browser will generate its own thicker version of the font in use.

And that’s how you can make a text with bold font using CSS 😉