font
====

The **`font`** CSS shorthand property sets all the different properties of an element's font. Alternatively, it sets an element's font to a system font.

Try it
------

As with any shorthand property, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). Though not directly settable by `font`, the longhands `font-size-adjust` and `font-kerning` are also reset to their initial values.

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `font-family`
* `font-size`
* `font-stretch`
* `font-style`
* `font-variant`
* `font-weight`
* `line-height`
Syntax
------


```css
/\* font-size font-family \*/
font: 1.2em "Fira Sans", sans-serif;

/\* font-size/line height font-family \*/
font: 1.2em/2 "Fira Sans", sans-serif;

/\* font-style font-weight font-size font-family \*/
font: italic bold 1.2em "Fira Sans", sans-serif;

/\* font-stretch font-variant font-size font-family \*/
font: ultra-condensed small-caps 1.2em "Fira Sans", sans-serif;

/\* system font \*/
font: caption;
```


The `font` property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties.

If `font` is specified as a system keyword, it must be one of: `caption`, `icon`, `menu`, `message-box`, `small-caption`, `status-bar`.

If `font` is specified as a shorthand for several font-related properties, then:

* it must include values for:
    + `<font-size>`
    + `<font-family>`
* it may optionally include values for:
    + `<font-style>`
    + `<font-variant>`
    + `<font-weight>`
    + `<font-stretch>`
    + `<line-height>`
* `font-style`, `font-variant` and `font-weight` must precede `font-size`
* `font-variant` may only specify the values defined in CSS 2.1, that is `normal` and `small-caps`
* `font-stretch` may only be a single keyword value.
* `line-height` must immediately follow `font-size`, preceded by "/", like this: "`16px/3`"
* `font-family` must be the last value specified.
### Values

`<'font-style'>`

See the `font-style` CSS property.

`<'font-variant'>`

See the `font-variant` CSS property.

`<'font-weight'>`

See the `font-weight` CSS property.

`<'font-stretch'>`

See the `font-stretch` CSS property.

`<'font-size'>`

See the `font-size` CSS property.

`<'line-height'>`

See the `line-height` CSS property.

`<'font-family'>`

See the `font-family` CSS property.

#### System font values

`caption`

The system font used for captioned controls (e.g., buttons, drop-downs, etc.).

`icon`

The system font used to label icons.

`menu`

The system font used in menus (e.g., dropdown menus and menu lists).

`message-box`

The system font used in dialog boxes.

`small-caption`

The system font used for labeling small controls.

`status-bar`

The system font used in window status bars.

Prefixed system font keywords

Browsers often implement several more, prefixed, keywords: Gecko implements `-moz-window`, `-moz-document`, `-moz-desktop`, `-moz-info`, `-moz-dialog`, `-moz-button`, `-moz-pull-down-menu`, `-moz-list`, and `-moz-field`.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `font-style`: `normal`
* `font-variant`: `normal`
* `font-weight`: `normal`
* `font-stretch`: `normal`
* `font-size`: `medium`
* `line-height`: `normal`
* `font-family`: depends on user agent
 |
| Applies to | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Percentages | as each of the properties of the shorthand:* `font-size`: refer to the parent element's font size
* `line-height`: refer to the font size of the element itself
 |
| Computed value | as each of the properties of the shorthand:* `font-style`: as specified
* `font-variant`: as specified
* `font-weight`: the keyword or the numerical value as specified, with `bolder` and `lighter` transformed to the real value
* `font-stretch`: as specified
* `font-size`: as specified, but with relative lengths converted into absolute lengths
* `line-height`: for percentage and length values, the absolute length, otherwise as specified
* `font-family`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `font-style`: by computed value type; `normal` animates as `oblique 0deg`
* `font-variant`: discrete
* `font-weight`: a font weight
* `font-stretch`: a font stretch
* `font-size`: a length
* `line-height`: either number or length
* `font-family`: discrete
 |

Formal syntax
-------------
```

font =   
  [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-stretch-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]  |  
  <system-family-name>                                  
  
<font-variant-css2> =   
  normal      |  
  small-caps    
  
<font-stretch-css3> =   
  normal           |  
  ultra-condensed  |  
  extra-condensed  |  
  condensed        |  
  semi-condensed   |  
  semi-expanded    |  
  expanded         |  
  extra-expanded   |  
  ultra-expanded     
  
<system-family-name> =   
  caption        |  
  icon           |  
  menu           |  
  message-box    |  
  small-caption  |  
  status-bar       
  
```

Examples
--------

### Setting font properties


```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;
}

/\* Set the font size to 80% of the parent element
 or default value (if no parent element present).
 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;
}
```

### Live sample
```

<p>
  Change the radio buttons below to see the generated shorthand and its effect.
</p>
<form action="createShortHand()">
  <div class="cf">
    <div class="setPropCont">
      font-style<br />
      <input
 type="radio"
 id="font-style-none"
 name="font\_style"
 checked=""
 value=""
 onchange="setCss()" />
      <label for="font-style-none">none</label><br />
      <input
 type="radio"
 id="font-style-normal"
 name="font\_style"
 value="normal"
 onchange="setCss()" />
      <label for="font-style-normal">normal</label><br />
      <input
 type="radio"
 id="font-style-italic"
 name="font\_style"
 value="italic"
 onchange="setCss()" />
      <label for="font-style-italic">italic</label><br />
      <input
 type="radio"
 id="font-style-oblique"
 name="font\_style"
 value="oblique"
 onchange="setCss()" />
      <label for="font-style-oblique">oblique</label>
    </div>

    <div class="setPropCont">
      font-variant<br />
      <input
 type="radio"
 id="font-variant-none"
 name="font\_variant"
 checked=""
 value=" "
 onchange="setCss()" />
      <label for="font-variant-none">none</label><br />
      <input
 type="radio"
 id="font-variant-normal"
 name="font\_variant"
 value="normal"
 onchange="setCss()" />
      <label for="font-variant-normal">normal</label><br />
      <input
 type="radio"
 id="font-variant-small-caps"
 name="font\_variant"
 value="small-caps"
 onchange="setCss()" />
      <label for="font-variant-small-caps">small-caps</label>
    </div>

    <div class="setPropCont">
      font-weight<br />
      <input
 type="radio"
 id="font-weight-none"
 name="font\_weight"
 value=""
 onchange="setCss()" />
      <label for="font-weight-none">none</label><br />
      <input
 type="radio"
 id="font-weight-normal"
 checked=""
 name="font\_weight"
 value="400"
 onchange="setCss()" />
      <label for="font-weight-normal">normal</label><br />
      <input
 type="radio"
 id="font-weight-bold"
 name="font\_weight"
 value="700"
 onchange="setCss()" />
      <label for="font-weight-bold">bold</label>
    </div>

    <div class="setPropCont">
      font-size<br />
      <input
 type="radio"
 id="font-size-12px"
 name="font\_size"
 value="12px"
 onchange="setCss()" />
      <label for="font-size-12px">12px</label><br />
      <input
 type="radio"
 id="font-size-16px"
 name="font\_size"
 value="16px"
 checked=""
 onchange="setCss()" />
      <label for="font-size-16px">16px</label><br />
      <input
 type="radio"
 id="font-size-24px"
 name="font\_size"
 value="24px"
 onchange="setCss()" />
      <label for="font-size-24px">24px</label>
    </div>

    <div class="setPropCont">
      line-height<br />
      <input
 type="radio"
 id="line-height-none"
 name="line\_height"
 checked=""
 value=""
 onchange="setCss()" />
      <label for="line-height-none">none</label><br />
      <input
 type="radio"
 id="line-height-1.2"
 name="line\_height"
 value="/1.2"
 onchange="setCss()" />
      <label for="line-height-1.2">1.2</label><br />
      <input
 type="radio"
 id="line-height-3"
 name="line\_height"
 value="/3"
 onchange="setCss()" />
      <label for="line-height-3">3</label>
    </div>
    <br />

    <div class="setPropCont fontfamily">
      font-family<br />
      <input
 type="radio"
 id="font-family-courier"
 name="font\_family"
 checked=""
 value="courier"
 onchange="setCss(5,'courier')" />
      <label for="font-family-courier">courier</label><br />
      <input
 type="radio"
 id="font-family-serif"
 name="font\_family"
 value="serif"
 onchange="setCss()" />
      <label for="font-family-serif">serif</label><br />
      <input
 type="radio"
 id="font-family-sans-serif"
 name="font\_family"
 value="sans-serif"
 onchange="setCss()" />
      <label for="font-family-sans-serif">sans-serif</label><br />
      <input
 type="radio"
 id="font-family-arial"
 name="font\_family"
 value="arial"
 onchange="setCss()" />
      <label for="font-family-arial">Arial</label><br />
      <input
 type="radio"
 id="font-family-monospace"
 name="font\_family"
 value="monospace"
 onchange="setCss()" />
      <label for="font-family-monospace">monospace</label><br />
      <input
 type="radio"
 id="font-family-cursive"
 name="font\_family"
 value="cursive"
 onchange="setCss()" />
      <label for="font-family-cursive">cursive</label><br />
      <input
 type="radio"
 id="font-family-fantasy"
 name="font\_family"
 value="fantasy"
 onchange="setCss()" />
      <label for="font-family-fantasy">fantasy</label><br />
      <input
 type="radio"
 id="font-family-system-ui"
 name="font\_family"
 value="system-ui"
 onchange="setCss()" />
      <label for="font-family-system-ui">system-ui</label><br />
    </div>
  </div>

  <div class="cf propInputs">
    <div class="propInputCont tar">font :</div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_style" /><br />
      font-style <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_variant" /> <br />
      font-variant <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_weight" /> <br />
      font-weight <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss mandatory" id="input\_font\_size" /> <br />
      font-size <br />
      mandatory
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_line\_height" /> <br />
      line-height <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss mandatory" id="input\_font\_family" />
      <br />
      font-family <br />
      mandatory
    </div>
  </div>
</form>

<div class="fontShortHand">This is some sample text.</div>
<br /><br /><br /><br /><br /><br />
```


```
body,
input {
  font: 14px arial;
  overflow: hidden;
}

.propInputCont {
  float: left;
  text-align: center;
  margin-right: 5px;
  width: 80px;
}

.setPropCont {
  float: left;
  margin-right: 5px;
  width: 120px;
}

.propInputs,
.setPropCont {
  margin-bottom: 1em;
}

.curCss {
  border: none;
  border-bottom: 1px solid black;
  text-align: center;
  width: 80px;
}

.mandatory {
  border-bottom-color: red;
}

.cf::before,
.cf::after {
  content: " ";
  display: table;
}

.cf::after {
  clear: both;
}

.tar {
  width: 40px;
  text-align: right;
}
.fontfamily {
  display: inline-block;
}
```


```
const textAreas = document.getElementsByClassName("curCss");

function getProperties() {
  return (
    `${getCheckedValue("font\_style")} ` +
    `${getCheckedValue("font\_variant")} ` +
    `${getCheckedValue("font\_weight")} ` +
    `${getCheckedValue("font\_size")}` +
    `${getCheckedValue("line\_height")} ` +
    `${getCheckedValue("font\_family")}`
  );
}

function getCheckedValue(radioName) {
  const radios = document.forms[0].elements[radioName];
  for (let i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      const curElemName = `input\_${radioName}`;
      const curElem = document.getElementById(curElemName);
      curElem.value = radios[i].value;

      return radios[i].value;
    }
  }
}

function setCss() {
  injectCss(getProperties());
}

function injectCss(cssFragment) {
  const old = document.body.getElementsByTagName("style");
  if (old.length > 1) {
    old[1].parentElement.removeChild(old[1]);
  }
  css = document.createElement("style");
  css.textContent = `.fontShortHand{font: ${cssFragment}}`;
  document.body.appendChild(css);
}

setCss();
```

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-prop |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `font-style`
* `font-weight`
* Fundamental text and font styling