How to Bold Text with CSS

The font-weight CSS property is what controls the level of boldness that you can set on any given element.

<style>
  .font-bold {
    font-weight: bold;
  }
</style>

<p>Here is some <span class="font-bold">bold</span> text.</p>

In the example above, the bold value is set on the font-weight property.

Additional usage

You may want to use different weights of boldness within your styles. In terms of numeric font-weight values, bold font weights are considered anything above font-weight: 400.

Reference this list of available bold font weights:

font-weight: bold; // equals 700
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;