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 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-stretch
, font-size-adjust
, and font-kerning
are also reset to their initial 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
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
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.
caption
- The system font used for captioned controls (e.g., buttons, drop-downs, etc.).
-
icon
- The system font used to label icons.
- 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
.
[ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-barwhere
<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).
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
HTML Content
<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><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/>
CSS Content
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;
}
JavaScript Content
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
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 sizeline-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 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:
|
---|
Canonical order | order of appearance in the formal grammar of the values |
---|
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|
Basic support | 1 |
Yes | 1 | 3 | 3.5 | 1 |
System fonts | 1 |
Yes | 1 | 4 | 6 | 1 |
Support for font-stretch values |
Yes |
? | 43 |
? |
? |
? |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|
Basic support |
Yes |
Yes |
Yes | 4 |
Yes |
Yes |
Yes |
System fonts |
? |
? |
? |
? |
? |
? |
? |
Support for font-stretch values |
? |
? |
? | 43 |
? |
? |
? |
| Desktop | Mobile |
---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Edge Mobile | Firefox for Android | IE mobile | Opera for Android | iOS Safari |
---|
Basic support |
Full support
1 |
Full support
Yes |
Full support
1 |
Full support
3 |
Full support
3.5 |
Full support
1 |
Full support
Yes |
Full support
Yes |
Full support
Yes |
Full support
4 |
Full support
Yes |
Full support
Yes |
Full support
Yes |
---|
System fonts |
Full support
1 |
Full support
Yes |
Full support
1 |
Full support
4 |
Full support
6 |
Full support
1 |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
---|
Support for font-stretch values |
Full support
Yes |
?
|
Full support
43 |
?
|
?
|
?
|
?
|
?
|
?
|
Full support
43 |
?
|
?
|
?
|
---|