Open In App

HTML | DOM Style font Property

Last Updated : 08 Aug, 2022
Like Article

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. 


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

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. 



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


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

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads