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:
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:
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:
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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
05 Jun, 2022
Like Article
Save Article