Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style fontFamily Property
The HTML DOM Style font-family property is used for setting or returning the specific font list for the selected element. It is recommended to use web safe fonts and specifying additional fonts.
Following is the syntax for −
Setting the fontFamily property −
object.style.fontFamily = "font1, font2, etc.|initial|inherit"
Here, font1, font2 are comma separated font list. If the first font can’t be applied, then second one is applied and so on. Initial sets the property value to default value while inherit sets it to parent property value.
Let us look at an example for the fontFamily property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
li{
font-size: 1.1em;
background-color: snow;
font-family: cursive;
}
</style>
<script>
function changeFontFamily() {
for(var i=0;i<3;i++){
document.getElementsByTagName("li")[i].style.fontFamily="Sans-Seriff";
}
document.getElementById("Sample").innerHTML="The font family for the above list is now set to Helvetica";
}
</script>
</head>
<body>
<ul>
<li>This is list item 1.</li>
<li>This is list item 2</li>
<li>This is list item 3</li>
</ul>
<p>Change the above list items font family by clicking the below button</p>
<button onclick="changeFontFamily()">Change Font Family</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Font Family” button −
Updated on: 24-Oct-2019
30 Views
Advertisements