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.

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

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.

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

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: normalfont-variant: normalfont-weight: normalfont-stretch: normalfont-size: mediumline-height: normalfont-family: depends on user agent
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 sizeline-height: refer to the font size of the element itself
Computed value	as each of the properties of the shorthand:font-style: as specifiedfont-variant: as specifiedfont-weight: the keyword or the numerical value as specified, with bolder and lighter transformed to the real valuefont-stretch: as specifiedfont-size: as specified, but with relative lengths converted into absolute lengthsline-height: for percentage and length values, the absolute length, otherwise as specifiedfont-family: as specified
Animation type	as each of the properties of the shorthand:font-style: discretefont-variant: discretefont-weight: a font weightfont-stretch: a font stretchfont-size: a lengthline-height: either number or lengthfont-family: discrete

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

Setting font properties

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

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
CSS Fonts Module Level 4 # font-prop

See also

font-style font-weight Fundamental text and font styling

Last modified: Sep 20, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어PolskiРусский中文 (简体) Change language