How to get font properties of particular element in JavaScript ?

Last Updated : 12 Jul, 2025

Given a string element and the task is to get the font properties of a particular element using JavaScript.

Approach:

Store a string to the variable.
Then use element.style.property to get the propertyValue of that element.

Example 1: This example gets the font-family of the element [id = 'GFG'].

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        How to get font properties of
        particular element in JavaScript ?
    </title>
</head>

<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <h3 id="GFG" style="font-family: sans-serif;">
        How to get font properties of
        particular element in JavaScript ?
    </h3>

    <button onclick="GFG_Fun()">
        Click Here
    </button>

    <p id="GFG_Res"></p>

    <script>
        let elm1 = document.getElementById("GFG");
        let elm2 = document.getElementById("GFG_Res");

        function GFG_Fun() {
            elm2.innerHTML =
                "Font-style Property: '" 
                + elm1.style.fontFamily + "'";
        }        
    </script>
</body>
</html>

Output:

Example 2: This example gets the font-weight of the element [id = 'GFG'].

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        How to get font properties of
        particular element in JavaScript ?
    </title>
</head>

<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <h3 id="GFG" style="font-weight: bold;">
        How to get font properties of
        particular element in JavaScript ?
    </h3>

    <button onclick="GFG_Fun()">
        Click Here
    </button>

    <p id="GFG_Res"></p>

    <script>
        let elm1 = document.getElementById("GFG");
        let elm2 = document.getElementById("GFG_Res");

        function GFG_Fun() {
            elm2.innerHTML =
                "Font-weight Property: '" 
                + elm1.style.fontWeight + "'";
        }        
    </script>
</body>
</html>