Javascript DOM CSS Style fontFamily Property

Introduction

Set the font for a <p> element: 

document.getElementById("myP").style.fontFamily = "Impact,Charcoal,sans-serif";

View in separate window 

<!DOCTYPE html>
<html>
<body>

<p id="myP">This is a paragraph.</p>

<button type="button" onclick="myFunction()">Set font</button>

<script>
function myFunction() {/*www  .  ja va 2s  .  co  m*/
  document.getElementById("myP").style.fontFamily = "Impact,Charcoal,sans-serif";
}
</script>

</body>
</html>

The fontFamily property sets or gets a list of font-family names and/or generic-family names for text in an element.

The browser will use the first value it recognizes.

There are two types of font-family values:

  • font-family: like verdana or arial
  • generic-family: like "serif" or "sans-serif"

You should always specify a generic-family name as the last alternative!

Separate each value with a comma.

If a font-family name contains whitespace, it must be quoted.

Property Values

Value Description
font1, font2, etc. A comma-separated list of font-family names and/or generic-family names
initialSets this property to its default value.
inheritInherits this property from its parent element.

The fontFamily property returns a String representing the font name of the text in the element.




PreviousNext

Related