SVG font-weight Attribute

Last Updated : 31 Mar, 2022

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.

Syntax:

font-variant="variation"

Attribute Values:

Default value: Default value is normal.
other value: Other values are bold, bolder, lighter.

We will use the font-weight attribute for setting the weight of font.

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg viewBox="0 0 200 300" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <text x="5" y="20" 
            font-weight="Normal"> 
            Normal text 
        </text> 
    </svg> 
</body> 
  
</html> 

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg viewBox="0 0 200 300" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <text x="5" y="20" font-weight="bold"> 
            bold text 
        </text> 
    </svg> 
</body> 
  
</html> 