HTML | DOM Style fontFamily Property

The fontFamily property set/return a list of Font-Family names and generic-family names for text in an element. The web browser will implement the first value it recognizes.

Syntax:

It returns the fontFamily property.

object.style.fontFamily

It sets the fontFamily Property.

object.style.fontFamily = "font1, font2, etc.|initial|inherit"

Property Values:

Value	Description
font1, font2, etc.	List of font-family names and generic-family names separated by a comma.
initial	Sets property in default value.
inherit	Inherits from parent element.

Return value:It returns the number of font-family names and/or generic family names.

Example-1: Font-family name “Impact”.

html

<!DOCTYPE html>

<html>
 
<head>

    <title>DOM Style fontFamily Property </title>

</head>
 
<body>

    <center>

        <p style="color: green;

                  width: 100%; 

                  font-size: 30px; 

                  font-weight: bold;"

           id="Geek1">

            GeeksForGeeks

        </p>
 
        <h2>DOM Style fontFamily Property </h2>

        <br>

        <button type="button" onclick="myGeeks()">

            Click to change

        </button>
 
        <script>

            function myGeeks() {

                //  Set font-family 'impact'.

                document.getElementById(

                  "Geek1").style.fontFamily = "Impact";

            }

        </script>

    </center>

</body>
 
</html>

Output:

Before click on button:

After click on button:

Example-2: Font-family name “sans-serif”.

html

<!DOCTYPE html>

<html>
 
<head>

    <title>DOM Style fontFamily Property </title>

</head>
 
<body>

    <center>

        <p style="color: green;

                  width: 100%;

                  font-size: 30px;

                  font-weight: bold;" id="Geek1">

            GeeksForGeeks

        </p>
 
        <h2>DOM Style fontFamily Property </h2>

        <br>
 
        <button type="button" onclick="myGeeks()">

            Click to change

        </button>
 
        <script>

            function myGeeks() {
 
                //  Set font-family 'sans-serif'.

                document.getElementById(

                  "Geek1").style.fontFamily = "sans-serif";

            }

        </script>

    </center>

</body>
 
</html>

Output:

Before click on button:

After click on button:

Example-3: Font-family names “Comic Sans MS, cursive, sans-serif”.

html

<!DOCTYPE html>

<html>
 
<head>

    <title>DOM Style fontFamily Property </title>

</head>
 
<body>

    <center>

        <p style="color: green; 

                  width: 100%;

                  font-size: 30px;

                  font-weight: bold;" id="Geek1">

            GeeksForGeeks

        </p>
 
        <h2>DOM Style fontFamily Property </h2>

        <br>
 
        <button type="button" onclick="myGeeks()">

            Click to change

        </button>
 
        <script>

            function myGeeks() {
 
                //   Set font-family 'Comic Sans MS, cursive

                //  and sans-serif'

                document.getElementById(

                        "Geek1").style.fontFamily =

                    'Comic Sans MS, cursive, sans-serif';

            }

        </script>

    </center>

</body>
 
</html>