Skip to content
Related Articles

Related Articles

HTML | DOM Style fontFamily Property

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 05 Jun, 2022

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: 

ValueDescription
font1, font2, etc.List of font-family names and generic-family names separated by a comma.
initialSets property in default value.
inheritInherits 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>

Output:

  • Before click on button:

 

  • After click on button:

 

Supported Browsers: The browser supported by HTML | DOM Style fontFamily Property are listed below:

  • Google Chrome 1 and above
  • Edge 12 and above
  • Internet Explorer 3 and above
  • Mozilla 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!