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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-none-for-attribute-font-weight-on-element-g
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The SVG `font-weight` presentation attribute controls the boldness or lightness of glyphs used to render text. According to the SVG specification, this attribute is only valid on text content elements: `<text>`, `<tspan>`, `<textPath>`, and the deprecated `<tref>`. While the `<g>` element is a general-purpose container for grouping SVG elements, it does not accept `font-weight` as a direct attribute in valid markup.

The value `"none"` compounds the problem because it is not a recognized value for `font-weight` in any context. The allowed values are:

- `normal` (equivalent to `400`)
- `bold` (equivalent to `700`)
- `bolder` (relative to parent)
- `lighter` (relative to parent)
- A numeric value: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, or `900`

This matters for standards compliance and predictable rendering across browsers. While some browsers may silently ignore invalid attributes or values, relying on that behavior leads to fragile code. Using valid attributes on the correct elements ensures consistent results and avoids validation errors.

If you need to apply a `font-weight` to multiple text elements inside a `<g>`, use CSS instead. You can apply a style via the `style` attribute on the `<g>`, a `class`, or an inline `<style>` block. CSS `font-weight` is inherited, so child text elements will pick it up.

## Examples

### Invalid: `font-weight="none"` on a `<g>` element

```html
<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <g font-weight="none">
    <text y="20">Hello</text>
  </g>
</svg>
```

This triggers the validation error because `<g>` does not accept the `font-weight` attribute directly, and `"none"` is not a valid value.

### Fixed: `font-weight` on the `<text>` element with a valid value

```html
<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <g>
    <text y="20" font-weight="bold">Hello</text>
  </g>
</svg>
```

### Fixed: using a numeric weight on `<text>`

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

### Fixed: applying `font-weight` to a `<g>` via CSS

If you want all text inside a `<g>` to share the same weight, use the `style` attribute or a CSS class. CSS-based `font-weight` on a `<g>` is valid because CSS inheritance applies to all descendant text content.

```html
<svg viewBox="0 0 300 30" xmlns="http://www.w3.org/2000/svg">
  <g style="font-weight: bold">
    <text y="20">This is bold</text>
    <text x="150" y="20">Also bold</text>
  </g>
</svg>
```

### Fixed: using an inline `<style>` block

```html
<svg viewBox="0 0 300 30" xmlns="http://www.w3.org/2000/svg">
  <style>
    .heavy { font-weight: 900; }
  </style>
  <g class="heavy">
    <text y="20">Heavy text</text>
    <text x="150" y="20">Also heavy</text>
  </g>
</svg>
```