font-family

  • Revision slug: CSS/font-family
  • Revision title: font-family
  • Revision id: 19462
  • Created:
  • Creator: Dria
  • Is current revision? No
  • Comment

Revision Content

{{template.CSSRef()}}

Summary

font-family allows for a prioritized list of font family names and/or generic family names to be specified for the selected element. Unlike most other CSS properties, values are separated by a comma to indicate that they are alternatives.

  • Initial value: depends on user agent
  • Applies to: all elements
  • Inherited: yes
  • Percentages: N/A
  • Media: visual
  • Computed value: as specified

Syntax

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

Values

family-name 
The name of a font family. For example, "Times" and "Helvetica" are font families. Font family names containing whitespace should be quoted.
generic-family 
The following generic families are defined: serif, sans-serif, cursive, fantasy, monospace. Generic family names are keywords and should not be quoted.

Examples

{{template.CSSRefExampleLink("font-family")}}

body { font-family: "Gill Sans Extrabold", Helvetica, sans-serif }

.receipt { font-family: Courier, "Lucida Console", monospace }

Notes

You should always specify a generic family name as the last value in the font-family property.

Specifications

Browser Compatibility

TBD (This might best be done as a single centralized compatibility chart.)

See Also

{{wiki.template('CSS_Reference:Fonts')}}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p><code>font-family</code> allows for a prioritized list of font family names and/or generic family names to be specified for the selected element.  Unlike most other CSS properties, values are separated by a comma to indicate that they are alternatives.
</p>
<ul><li> Initial value: depends on user agent
</li><li> Applies to: all elements
</li><li> Inherited: yes
</li><li> Percentages: N/A
</li><li> Media: <a href="en/CSS/Media/Visual">visual</a>
</li><li> Computed value: as specified
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">font-family: [[<i>family-name</i>|<i>generic-family</i>]
    [,<i>family-name</i>|<i>generic-family</i>]*] | <i>inherit</i>
</pre>
<h3 name="Values"> Values </h3>
<dl><dt> family-name </dt><dd> The name of a font family.  For example, "Times" and "Helvetica" are font families.  Font family names containing whitespace should be quoted.
</dd><dt> generic-family </dt><dd> The following generic families are defined: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code>, <code>monospace</code>.  Generic family names are keywords and should not be quoted.
</dd></dl>
<h3 name="Examples"> Examples </h3>
<p>{{template.CSSRefExampleLink("font-family")}}
</p>
<pre>body { font-family: "Gill Sans Extrabold", Helvetica, sans-serif }

.receipt { font-family: Courier, "Lucida Console", monospace }
</pre>
<h3 name="Notes"> Notes </h3>
<p>You should always specify a generic family name as the last value in the <code>font-family</code> property.
</p>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#font-family">CSS 1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#font-family-prop">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/2002/WD-css3-fonts-20020802/#font-family-prop">CSS 3</a>
</li></ul>
<h3 name="Browser_Compatibility"> Browser Compatibility </h3>
<p>TBD (This might best be done as a single centralized compatibility chart.)
</p>
<h3 name="See_Also"> See Also </h3>
<p>{{wiki.template('CSS_Reference:Fonts')}}
</p>
Revert to this revision