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> |
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
Please Login to comment...