font

  • Revision slug: Web/CSS/font
  • Revision title: font
  • Revision id: 472479
  • Created:
  • Creator: SiddharthBhatt
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The font CSS property is either a shorthand property for setting {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} and {{ Cssxref("font-family") }}, or a way to set the element's font to a system font, using specific keywords.

As with any shorthand CSS properties, the values which are not set in it are set to their individual initial values, eventually overriding values previously set using non-shorthand properties.

Note: There are few caveats when using the CSS font shorthand. If these conditions are not met, the property is invalid and is entirely ignored.
  • Except when using a keyword, it is mandatory to define the value of both the {{ cssxref("font-size") }} and the {{ cssxref("font-style") }} properties.
  • Not all values of {{ cssxref("font-variant") }} are allowed. Only the values defined in CSS 2.1 are allowed, that is normal and small-caps.
  • Though not directly settable by font, the values of {{ cssxref("font-stretch") }}, {{ cssxref("font-size-adjust") }} and {{ cssxref("font-kerning") }} are also reset to their initial values.
  • The order of the values is not completely free: {{ cssxref("font-style") }}, {{ cssxref("font-variant") }} and {{ cssxref("font-weight") }} must be defined, if any, before the {{ cssxref("font-size") }} value. The {{ cssxref("line-height") }} value must be defined immediately after the {{ cssxref("font-size") }}, preceded by a mandatory /. Finally the {{ cssxref("font-family") }} is mandatory and must be the last value defined ({{ cssxref("inherit") }} value does not work).

{{cssbox("font")}}

Syntax

Formal syntax: {{csssyntax("font")}}

Values

<'font-style'>
See the {{ Cssxref("font-style") }} CSS property.
<'font-variant'>
See the {{ Cssxref("font-variant") }} CSS property.
<'font-weight'>
See the {{ Cssxref("font-weight") }} CSS property.
<'font-size'>
See the {{ Cssxref("font-size") }} CSS property.
<'line-height'>
See the {{ cssxref("line-height") }} CSS property.
<'font-family'>
See the {{ Cssxref("font-family") }} CSS property.
caption icon menu message-box small-caption status-bar
Instead of specifying individual longhand properties, a keyword can be used to represent a specific system font:
caption The font used for captioned controls (e.g., buttons, drop-downs, etc.).
icon The font used to label icons.
menu The font used in menus (e.g., dropdown menus and menu lists).
message-box The font used in dialog boxes.
small-caption The font used for labeling small controls.
status-bar The font used in window status bars.
Browsers implementing these often implement several more, prefixed, values; Gecko implements -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list and -moz-field.

Examples

{{ CSSRefExampleLink("font") }}

/* Set the font size to 12px and the line height to 14px. Set the font family to sans-serif */
p { font: 12px/14px sans-serif }
/* Set the font size to 80% of the parent element or default value (if no parent element present) 
and set the font family to sans-serif */ 
p { font: 80% sans-serif }
/* Set the font weight to bold, the font-style to italic, the font size to large, 
and the font family to serif. */
p { font: bold italic large serif }
/* Use the same font as the status bar of the window */
p { font: status-bar }

Specifications

Specification Status Comment
{{ SpecName('CSS3 Fonts', '#font', 'font') }} {{ Spec2('CSS3 Fonts') }} No change.
{{ SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight') }} {{ Spec2('CSS2.1') }} Added support for keywords.
{{ SpecName('CSS1', '#font', 'font') }} {{ Spec2('CSS1') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Shorthand 1.0 1.0 (1.0) 3.0-4.0 3.5 1.0 (85)
System fonts 1.0 1.0 (1.0) 4.0-5.5 6.0 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

  • The font-related CSS properties: {{ CSS_Reference:Fonts() }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>font</code> CSS property is either a shorthand property for setting {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} and {{ Cssxref("font-family") }}, or a way to set the element's font to a system font, using specific keywords.</p>
<p>As with any shorthand CSS properties, the values which are not set in it are set to their individual initial values, eventually overriding values previously set using non-shorthand properties.</p>
<div class="note">
  <strong>Note</strong>: There are few caveats when using the CSS <code>font</code> shorthand. If these conditions are not met, the property is invalid and is entirely ignored.<br />
  <ul>
    <li>Except when using a keyword, it is mandatory to define the value of both the {{ cssxref("font-size") }} and the {{ cssxref("font-style") }} properties.</li>
    <li>Not all values of {{ cssxref("font-variant") }} are allowed. Only the values defined in CSS 2.1 are allowed, that is <code>normal</code> and <code>small-caps</code>.</li>
    <li>Though not directly settable by <code>font</code>, the values of {{ cssxref("font-stretch") }}, {{ cssxref("font-size-adjust") }} and {{ cssxref("font-kerning") }} are also reset to their initial values.</li>
    <li>The order of the values is not completely free: {{ cssxref("font-style") }}, {{ cssxref("font-variant") }} and {{ cssxref("font-weight") }} must be defined, if any, before the {{ cssxref("font-size") }} value. The {{ cssxref("line-height") }} value must be defined immediately after the {{ cssxref("font-size") }}, preceded by a mandatory <code>/</code>. Finally the {{ cssxref("font-family") }} is mandatory and must be the last value defined ({{ cssxref("inherit") }}&nbsp;value does not work).</li>
  </ul>
</div>
<p>{{cssbox("font")}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("font")}}</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <code>&lt;'font-style'&gt;</code></dt>
  <dd>
    See the {{ Cssxref("font-style") }} CSS property.</dd>
  <dt>
    <code>&lt;'font-variant'&gt;</code></dt>
  <dd>
    See the {{ Cssxref("font-variant") }} CSS property.</dd>
  <dt>
    <code>&lt;'font-weight'&gt;</code></dt>
  <dd>
    See the {{ Cssxref("font-weight") }} CSS property.</dd>
  <dt>
    <code>&lt;'font-size'&gt;</code></dt>
  <dd>
    See the {{ Cssxref("font-size") }} CSS property.</dd>
  <dt>
    <code>&lt;'line-height'&gt;</code></dt>
  <dd>
    See the {{ cssxref("line-height") }} CSS property.</dd>
  <dt>
    <code>&lt;'font-family'&gt;</code></dt>
  <dd>
    See the {{ Cssxref("font-family") }} CSS property.</dd>
  <dt>
    <code>caption</code> <code>icon</code> <code>menu</code> <code>message-box</code> <code>small-caption</code> <code>status-bar</code></dt>
  <dd>
    Instead of specifying individual longhand properties, a keyword can be used to represent a specific system font:
    <table class="standard-table">
      <tbody>
        <tr>
          <td><code>caption</code></td>
          <td>The font used for captioned controls (e.g., buttons, drop-downs, etc.).</td>
        </tr>
        <tr>
          <td><code>icon</code></td>
          <td>The font used to label icons.</td>
        </tr>
        <tr>
          <td><code>menu</code></td>
          <td>The font used in menus (e.g., dropdown menus and menu lists).</td>
        </tr>
        <tr>
          <td><code>message-box</code></td>
          <td>The font used in dialog boxes.</td>
        </tr>
        <tr>
          <td><code>small-caption</code></td>
          <td>The font used for labeling small controls.</td>
        </tr>
        <tr>
          <td><code>status-bar</code></td>
          <td>The font used in window status bars.</td>
        </tr>
      </tbody>
    </table>
    Browsers implementing these often implement several more, prefixed, values; Gecko implements <code>-moz-window</code>, <code>-moz-document</code>, <code>-moz-desktop</code>, <code>-moz-info</code>, <code>-moz-dialog</code>, <code>-moz-button</code>, <code>-moz-pull-down-menu</code>, <code>-moz-list</code> and <code>-moz-field</code>.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>{{ CSSRefExampleLink("font") }}</p>
<pre class="brush: css">
/* Set the font size to 12px and the line height to 14px. Set the font family to sans-serif */
p { font: 12px/14px sans-serif }
</pre>
<pre class="brush: css">
/* Set the font size to 80% of the parent element or default value (if no parent element present) 
and set the font family to sans-serif */ 
p { font: 80% sans-serif }
</pre>
<pre class="brush: css">
/* Set the font weight to bold, the font-style to italic, the font size to large, 
and the font family to serif. */
p { font: bold italic large serif }
</pre>
<pre class="brush: css">
/* Use the same font as the status bar of the window */
p { font: status-bar }
</pre>
<h2 id="Notes" name="Notes">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Fonts', '#font', 'font') }}</td>
      <td>{{ Spec2('CSS3 Fonts') }}</td>
      <td>No change.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight') }}</td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>Added support for keywords.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS1', '#font', 'font') }}</td>
      <td>{{ Spec2('CSS1') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Shorthand</td>
        <td>1.0</td>
        <td>1.0 (1.0)</td>
        <td>3.0-4.0</td>
        <td>3.5</td>
        <td>1.0 (85)</td>
      </tr>
      <tr>
        <td>System fonts</td>
        <td>1.0</td>
        <td>1.0 (1.0)</td>
        <td>4.0-5.5</td>
        <td>6.0</td>
        <td>1.0 (85)</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>The font-related CSS properties: {{ CSS_Reference:Fonts() }}</li>
</ul>
Revert to this revision