How to Make Text Bold in CSS

What you’ll build or solve

Make text bold with CSS so you can style headings, labels, and UI text without changing your HTML. You’ll use font-weight to control boldness and keep the styling targeted.

When this approach works best

This approach works best when you want consistent styling across a page or site.

Use it when you:

• Bold headings, nav links, or button labels across multiple pages.
• Highlight small labels like “New” or “Required” without adding semantic HTML tags.
• Apply bold styling to a few words inside a sentence with a reusable class.

Skip this approach when:

• The text is semantically important inside a sentence, such as a warning label. In HTML, <strong> can be a better fit.
• You’re using a font that only ships with one weight. Bold may look unchanged or “fake.”

Prerequisites

• An HTML file linked to a CSS file or a <style> tag
• Basic comfort with CSS selectors, such as element selectors and classes

Step-by-step instructions

Step 1: Use font-weight to make text bold

Control boldness with the font-weight property. Pick the option that matches how you want to apply it.

Option A: Use numeric weights (most common)

400 is normal, 700 is bold.

h1 {
  font-weight:700;
}

Option B: Use keywords

bold maps to a heavier weight, usually 700.

.label {
  font-weight:bold;
}

Option C: Apply it with a reusable class

Use a class when you want to bold a specific part of a sentence or target a few elements without broad selectors.

<p>Save your work before you<spanclass="bold">refresh</span> the page.</p>

.bold {
  font-weight:700;
}

What to look for

• If nothing changes, the font may not include that weight. Try 600, or switch to a font that has bold weights.
• If a whole section becomes bold, you may have set font-weight on a parent element, and children inherit it.
• If too much becomes bold, your selector is too broad. Prefer a class over body or a wide element selector.
• If a bold rule does not work, another rule may override it due to specificity or order.

Examples you can copy

Example 1: Bold all headings

h1,
h2,
h3 {
  font-weight:700;
}

Example 2: Bold navigation links, keep body text normal

<navclass="nav">
<ahref="/docs">Docs</a>
<ahref="/pricing">Pricing</a>
</nav>

<p>Read the docs to get started.</p>

.nava {
  font-weight:600;
}

Example 3: Bold a small label inside a sentence

<p><spanclass="tag">New</span> weekly challenges are live.</p>

.tag {
  font-weight:700;
}

Common mistakes and how to fix them

Mistake 1: Setting font-weight on body and bolding everything

What you might do:

body {
  font-weight:700;
}

Why it breaks:

Most text becomes bold, which hurts readability and reduces contrast between headings and body text.

Correct approach:

Target the elements you actually want bold.

h1,
h2 {
  font-weight:700;
}

Mistake 2: Using a font that doesn’t include a bold weight

What you might do:

.title {
  font-weight:700;
  font-family:"CustomFont",sans-serif;
}

Why it breaks:

If the font file only includes one weight, the browser may not render a true bold.

Correct approach:

Use an available weight, or load the bold font weight.

.title {
  font-weight:600;
}

Mistake 3: A more specific rule overrides your bold rule

What you might do:

.cardp {
  font-weight:400;
}

.note {
  font-weight:700;
}

Why it breaks:

If the element is .card p.note, the more specific selector can win and keep the text normal.

Correct approach:

Match the context or increase specificity.

.cardp.note {
  font-weight:700;
}

Troubleshooting

• If text will not become bold, try font-weight: 600 or switch to a font family with multiple weights.
• If everything turns bold, search your CSS for font-weight on body or a wrapper element and remove it.
• If only some elements respond, check for overriding rules with higher specificity.
• If bold looks blurry or fake, you may be missing the real bold font file for that font family.
• If nothing changes at all, confirm your stylesheet is loading and not returning a 404.

Quick recap

• Use font-weight to make text bold.
• Numeric weights like 600 or 700 give you more control than keywords.
• Use a class when you want bold on a small, specific piece of text.
• Watch for inheritance and overly broad selectors.
• If bold does not render, the font may not support that weight or another rule may override it.