Javascript Reference - HTML DOM Style font Property








The font property sets or gets font properties in a shorthand form.

With font property, we can set/get the following properties:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family

The font-size and font-family are required.





Browser Support

font Yes Yes Yes Yes Yes

Syntax

Return the font property:

var v = object.style.font

Set the font property:

object.style.font='font-style font-variant font-weight font-size/line-height|
       caption|icon|menu|message-box|small-caption|status-bar|initial|inherit'

Property Values

Value Description
style Sets the font-style
variant Set a small-caps font
weight Set font boldness
size Sets font size
lineHeight Set the distance between lines
family Set the font face
caption Use font like button controls
icon Use font used to label icons
menu Use font in menus
message-box Use font in dialog boxes
small-caption Use font in small controls
status-bar Use font in window status bars
initial Set to default value
inherit Inherit from parent element.




Technical Details

Default Value: not specified
Return Value: A string representing different font properties
CSS Version CSS1

Example

The following code shows how to set the font for a <p> element.


<!DOCTYPE html>
<html>
<body>
<!--from   www .  jav a 2 s.  c  o m-->
<p id="myP">This is a paragraph.</p>

<button type="button" onclick="myFunction()">test</button>
 
<script>
function myFunction() {
    document.getElementById("myP").style.font = "italic bold 20px arial,serif";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the font of a <p> element.


<!DOCTYPE html>
<html>
<body>
<!-- ww  w  .  j  a v a 2  s  .  co  m-->
<p id="myP" style="font:italic bold 30px Georgia,serif;">This is a paragraph.</p>

<button type="button" onclick="myFunction()">test</button>
 
<script>
function myFunction() {
    console.log(document.getElementById("myP").style.font);
}
</script>

</body>
</html>

The code above is rendered as follows: