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”.

<!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”.

<!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”.

<!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
Internet Explorer
Mozilla firefox
Opera
Safari

My Personal Notes

Recommended Posts: