font-family

Overview

W3C

Properties

background

background-attachment

The font-family property is a prioritized list of font family names and/or generic family names.


                                font-family: [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit

Initial:	depends on user agent
Applies To:	all elements
Inherited:	yes
Percentages:	NA
Media:	visual

Values
DOM
Example | Values | family-name
Example | Values | generic-family
Example | DOM
References


                                font-family: value;


Value:	Description:
family-name	Name of a font family of choice
generic-family	Name of a generic font family as an alternative
inherit	Takes the same computed value as the property for the element's parent


                                [window.]document.getElementById("element-id").style.fontFamily = "font-family";

<html>
  <head>
    <title>font-family</title>
  </head>
  <body>
    <a href="/" onmouseover="mouseover1();">Times</a>
    <a href="/" onmouseover="mouseover2();">Helvetica</a>
    <a href="/" onmouseover="mouseover3();">Zapf-Chancery</a>
    <a href="/" onmouseover="mouseover4();">Western</a>
    <a href="/" onmouseover="mouseover5();">Courier</a><br>
    <a href="/" onmouseover="mouseover6();">serif</a>
    <a href="/" onmouseover="mouseover7();">sans-serif</a>
    <a href="/" onmouseover="mouseover8();">cursive</a>
    <a href="/" onmouseover="mouseover9();">fantasy</a>
    <a href="/" onmouseover="mouseover10();">monospace</a><br>
    <a href="/" onmouseover="mouseover11();">Times serif</a>
    <a href="/" onmouseover="mouseover12();">Helvetica sans-serif</a>
    <a href="/" onmouseover="mouseover13();">Zapf-Chancery cursive</a>
    <a href="/" onmouseover="mouseover14();">Western fantasy</a>
    <a href="/" onmouseover="mouseover15();">Courier monospace</a>
    <p id="id1">paragraph</p>
  </body>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("id1").style.fontFamily = "Times";
    }
    function mouseover2() {
      document.getElementById("id1").style.fontFamily = "Helvetica";
    }
    function mouseover3() {
      document.getElementById("id1").style.fontFamily = "Zapf-Chancery";
    }
    function mouseover4() {
      document.getElementById("id1").style.fontFamily = "Western";
    }
    function mouseover5() {
      document.getElementById("id1").style.fontFamily = "Courier";
    }
    function mouseover6() {
      document.getElementById("id1").style.fontFamily = "serif";
    }
    function mouseover7() {
      document.getElementById("id1").style.fontFamily = "sans-serif";
    }
    function mouseover8() {
      document.getElementById("id1").style.fontFamily = "cursive";
    }
    function mouseover9() {
      document.getElementById("id1").style.fontFamily = "fantasy";
    }
    function mouseover10() {
      document.getElementById("id1").style.fontFamily = "monospace";
    }
    function mouseover11() {
      document.getElementById("id1").style.fontFamily = "Times, serif";
    }
    function mouseover12() {
      document.getElementById("id1").style.fontFamily = "Helvetica, sans-serif";
    }
    function mouseover13() {
      document.getElementById("id1").style.fontFamily = "Zapf-Chancery, cursive";
    }
    function mouseover14() {
      document.getElementById("id1").style.fontFamily = "Western, fantasy";
    }
    function mouseover15() {
      document.getElementById("id1").style.fontFamily = "Courier, monospace";
    }
  </script>
</html>

W3C Cascading Style Sheets, level 1

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

CSS

Values

DOM

Example | Values | family-name

Example | Values | generic-family

Example | DOM

References