Change font family in JavaScript

Description

The following code shows how to change font family.

Example


<!DOCTYPE html>
<html>
<body>
<div id="div1">
This is a DIV element. Click me to see the change.
</div><!--  w ww.ja v  a2s.  co m-->
<script type="text/javascript">
var div = document.getElementById("div1");

div.style.backgroundColor="#00f";
div.style.width="500px";
div.style.color="#fff";
div.style.height="200px";
div.style.paddingLeft="50px";
div.style.paddingTop="50px";
div.style.fontFamily="Verdana";
div.style.fontSize="2em";
div.style.border="3px dashed #ff0";
div.style.position="absolute";
div.style.left="20px";
div.style.top="10px";
div.style.textDecoration="underline";

</script>
</body>
</html>

Click to view the demo

The code above generates the following result.

Change font family in JavaScript
Home »
  Javascript Tutorial »
    Style »
      Font
Javascript Tutorial Font
Change font Size to larger in JavaScript
Change font Weight to 900 in JavaScript
Change font family in JavaScript
Change font size in JavaScript
Set font color with form control in JavaScr...
Set font size with form control in JavaScri...