Skip to content
Related Articles

Related Articles

HTML | DOM Style font Property

View Discussion
Improve Article
Save Article
  • Last Updated : 08 Aug, 2022

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;

Return Values: It returns a string value, which represents different font properties of the element

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: 

html




<!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 1 and above
  • Internet Explorer 3 and above
  • Edge 12 and above
  • Firefox 1 and above
  • Opera 3.5 and above
  • Safari 1 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!