HTML Guide - issues tagged as font-weight

Bad value “none” for attribute “font-weight” on element “g”.

font-weight

The attribute font-weight can be used on SVG text elements like text but not on g container elements, and none is not a valid value.

The font-weight attribute refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.

This attribute can be used with the SVG elements text, textPath, tref and tspan, but on on g elements.

Its allowed values are normal, bold, bolder, lighter, or a number. The value none is not valid for this attribute.

Here’s an example:

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <text y="20" font-weight="normal">Normal text</text>
  <text x="100" y="20" font-weight="bold">Bold text</text>
</svg>

Alternatively, SVG text elements can also be stilyzed using CSS, like so:

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <text y="20" style="font-weight:normal">Normal text</text>
  <text x="100" y="20" style="font-weight:bold">Bold text</text>
</svg>

CSS: “font-style”: “bold” is not a “font-style” value.

The CSS font-style property is used to set the style of the font, such as normal, italic, or oblique. The value bold is not a valid value for font-style. Instead, you should use the font-weight property to set the boldness of the font. The valid values for font-weight are normal, bold, bolder, and lighter.

Here’s an example of how to use the font-weight property to set the text to bold:

<p style="font-weight: bold;">This text is bold.</p>

Alternatively, you can use a CSS stylesheet to apply the font-weight property to multiple elements:

<style>
  p { font-weight: bold; }
  h1 { font-weight: bolder; }
</style>

<p>This text is bold.</p>
<h1>This heading is even bolder.</h1>

CSS: “font-weight”: “X” is not a “font-weight” value.

The W3C Validator error “CSS: “font-weight”: “X” is not a “font-weight” value” indicates that an incorrect value has been assigned to the font-weight CSS property. The font-weight property controls the boldness or weight of the font, but it only accepts specific values, not a measurement like pixels.

Accepted Values for font-weight:

Keywords: normal, bold, bolder, lighter.
Numeric Values: 100, 200, 300, 400 (equivalent to normal), 500, 600, 700 (equivalent to bold), 800, 900.

Fixing the Issue:

You need to replace the incorrect value with one of the accepted values for font-weight.

Incorrect CSS:

p {
    font-weight: 20px; /* Invalid value */
}

Corrected CSS:

If you want to use a lighter weight, you can choose one of the valid numeric values.

For a thin font weight:

p {
  font-weight: 100; /* Thin weight */
}

For normal (default) font weight:

p {
  font-weight: 400; /* Normal weight */
}

For bold font weight:

p {
  font-weight: bold; /* Bold keyword */
}

Example in HTML:

Here’s how you might use the corrected font-weight property in a simple HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Corrected font-weight values */
        .thin {
            font-weight: 100;
        }
        .normal {
            font-weight: 400;
        }
        .bold {
            font-weight: bold;
        }
    </style>
    <title>Font Weight Example</title>
</head>
<body>
    <p class="thin">This is thin font weight.</p>
    <p class="normal">This is normal font weight.</p>
    <p class="bold">This is bold font weight.</p>
</body>
</html>