font-family

  • Revision slug: CSS/font-family
  • Revision title: font-family
  • Revision id: 19467
  • Created:
  • Creator: Mgjbot
  • Is current revision? No
  • Comment robot Adding: [[fr:CSS:font-family]]

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.

The font-family property specifies a list of fonts, from highest priority to lowest. Font selection does not simply stop at the first font named in the list that is on the user's system. Rather, font selection is done one character at a time, so that if an available font does not have a glyph that can display a character needed, the later available fonts are tried.

When a font is only available in some styles, variants, or sizes, those properties may also influence which font family is chosen.

Specifications

Browser Compatibility

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

See Also

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

{{ wiki.languages( { "fr": "fr/CSS/font-family", "pl": "pl/CSS/font-family" } ) }}

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><p>The <code>font-family</code> property specifies a list of fonts, from highest priority to lowest.  Font selection does <em>not</em> simply stop at the first font named in the list that is on the user's system.  Rather, font selection is done <em>one character at a time</em>, so that if an available font does not have a glyph that can display a character needed, the later available fonts are tried.  
</p><p>When a font is only available in some <a href="en/CSS/font-style">styles</a>, <a href="en/CSS/font-variant">variants</a>, or <a href="en/CSS/font-size">sizes</a>, those properties may also influence which font family is chosen.
</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>{{ wiki.languages( { "fr": "fr/CSS/font-family", "pl": "pl/CSS/font-family" } ) }}
Revert to this revision