W3cubDocs

/CSS

font

The font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height and 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, possibly overriding values previously set using non-shorthand properties.

Note: There are a few caveats when using the CSS font shorthand. If these conditions are not met, the property is invalid and is entirely ignored.
Initial value as each of the properties of the shorthand:
Applies to all elements. 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
Media visual
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:
Canonical order order of appearance in the formal grammar of the values

Syntax

/* size | family */
font: 2em "Open Sans", sans-serif;

/* style | size | family */
font: italic 2em "Open Sans", sans-serif;

/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/3 cursive;

/* style | variant | weight | stretch | size/line-height | family */
font: italic small-caps bolder condensed 16px/3 cursive;

/* The font used in system dialogs */
font: message-box;
font: icon;

/* Global values */
font: inherit;
font: initial;
font: unset;

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.
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.

Formal syntax

[ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar

where
<font-variant-css21> = [ normal | small-caps ]

Examples

/* 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 }

Live Sample

<p>
    Change the radio buttons below to see the generated shorthand and it's 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>
        
        <div class="setPropCont">
            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>
        </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>
body, input {
  font: 14px arial;
}

.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;
}
var textAreas = document.getElementsByClassName("curCss"),
    shortText = "",
    getCheckedValue,
    setCss,
    getProperties,
    injectCss;

getProperties = function () {
  shortText =
      getCheckedValue("font_style") + " " +
      getCheckedValue("font_variant") + " " +
      getCheckedValue("font_weight") + " " +
      getCheckedValue("font_size") +
      getCheckedValue("line_height") + " " +
      getCheckedValue("font_family");

  return shortText;
}

getCheckedValue = function(radio_name) {
  oRadio = document.forms[0].elements[radio_name];
  for (var i = 0; i < oRadio.length; i++) {
    if(oRadio[i].checked) {
      var propInput = "input_" + radio_name,
          curElemName = "input_" + radio_name,
          curElem = document.getElementById(curElemName);
      curElem.value = oRadio[i].value;

      return oRadio[i].value;
    }
  }
}

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

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

setCss();

Specifications

Specification Status Comment
CSS Fonts Module Level 3
The definition of 'font' in that specification.
Candidate Recommendation Added support for font-stretch values
CSS Level 2 (Revision 1)
The definition of 'font-weight' in that specification.
Recommendation Added support for keywords
CSS Level 1
The definition of 'font' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Shorthand 1.0 (Yes) 1.0 (1.0) 3.0 3.5 1.0 (85)
System fonts 1.0 (Yes) 1.0 (1.0) 4.0 6.0 1.0 (85)
Support of font-stretch values (Yes) ? 43 (43) ? ? ?
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes) ? ? ? ?
Support of font-stretch values ? ? 43 (43) ? ? ?

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font