JavaScript – Change the Font Family of HTML Element

To change the font family of a HTML Element using JavaScript, get reference to the element, and assign required font family value to the element.style.fontFamily property.

In the following example, we will change the font family of HTML Element with id "myElement" to "monospace", in JavaScript, using element.style.fontFamily property.

example.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #myElement {
            border:1px solid #CCC;
            width:100px;
            height:100px;
        }
    </style>
    <meta charset="utf-8">
</head> 
<body>
    <h2>Change Font Family of HTML Element in JavaScript</h2>
    <div id="myElement">Hello World!</div>
    <br>
    <button type="button" onclick="changeStyle()">Click Me</button>
    <script>
    function changeStyle(){
        var element = document.getElementById("myElement");
        element.style.fontFamily = "monospace";
    }
    </script>
</body>
</html>

Conclusion

In this JavaScript Tutorial, we learned how to change the font family of a HTML Element using JavaScript.