Skip to content
Related Articles

Related Articles

HTML | DOM Style font Property
  • Last Updated : 01 Aug, 2019

The HTML DOM Style’s font property is used to change the element’s font properties. It can be used to change the font style, weight, size, and family.

Syntax:

  • To set the font style :
    node.style.font = "font-properties font-size font-family;"
  • To get the current font style:
    node.style.font;

Property value: It is a string which has values like font properties, font size, and font family.
The properties are required in the following order :

  • Font style
  • Font variant
  • Font weight
  • Font size
  • Font height
  • Font family

Approach: We have a paragraph element with and ID of text. We created a function in JavaScript that takes in a string value in variable gfg as a parameter and sets the ‘text‘ ID element’s style.font property to ‘gfg‘. We call this function from the buttons, and supply property values appropriately.

Example:




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <title>HTML DOM | Style font property</title>
</head>
  
<body>
    <p id='text'>Welcome to GeeksForGeeks</p>
    
    <button onclick=
            "changeFont('italic 20px arial')">
      Italic, Arial, 20px
  </button>
    
    <button onclick=
            "changeFont('bold 26px serif')">
      Bold, Serif, 26px
  </button>
    
    <button onclick=
            "changeFont('italic bold 30px Montserrat')">
      Italic, Montserrat, 20px
  </button>
    
    <button onclick="changeFont('900 34px hack')">
      Weight 900, Hack, 34px
  </button>
  
    <script type="text/javascript">
        function changeFont(gfg) {
            
            //  Get font style.
            document.getElementById(
              'text').style.font = gfg;
        }
    </script>
  
</body>
  
</html>

Output:

Supported Browsers: The browsers supported by DOM style.font property are listed below:

  • Google Chrome
  • Internet Explorer/Edge
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :