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
Recommended Posts:
- HTML | DOM Style top Property
- HTML | DOM Style right Property
- HTML | DOM Style order Property
- HTML | DOM Style minWidth Property
- HTML | DOM Style textDecorationColor Property
- HTML | DOM Style fontStyle Property
- HTML | DOM Style lineHeight Property
- HTML | DOM Style animationFillMode Property
- HTML DOM | Style pageBreakAfter Property
- HTML | DOM Style columnCount Property
- HTML | DOM Style padding Property
- HTML | DOM Style outlineStyle Property
- HTML | DOM Style borderRadius Property
- HTML | DOM Style clear Property
- HTML | DOM Style columns Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.