font
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.
/* 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;
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. Though not directly settable by font
, the values of font-stretch
, font-size-adjust
and font-kerning
are also reset to their initial values.
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:
|
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Canonical order | order of appearance in the formal grammar of the values |
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:
- it may optionally include values for:
-
font-style
,font-variant
andfont-weight
must precedefont-size
-
font-variant
may only specify the values defined in CSS 2.1, that isnormal
andsmall-caps
-
line-height
must immediately followfont-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. 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 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
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