The font property is a shorthand that sets an element’s typeface and related font values in one declaration. You can also set a system font with a single keyword such as caption.
It is a shorthand for font-style, font-variant, font-weight, font-stretch / width, font-size, line-height, and font-family. It is inherited.
Using font also resets related longhands (such as font-feature-settings and font kerning) to their initial values. Set those again after the shorthand if you still need them.
font: [style] [variant] [weight] [stretch] size[/line-height] family | caption | menu | initial | inherit;font-size and font-family are required in the shorthand form. font-family must be last.
| Part / Value | Description | Try it |
|---|---|---|
size family | Minimum shorthand — size then family | Try it |
size/line-height family | Size, line-height (after a slash), then family | Try it |
style weight size family | Optional style and weight before size | Try it |
small-caps | Optional font-variant value in the shorthand | Try it |
caption / system | System font keyword (caption, menu, icon, …) | Try it |
inherit | Takes the parent’s computed font | Try it |
fontWrite required size and family first, then add optional style, weight, or line-height when you need them.
font-size and a font-family stack (required).italic, bold, or small-caps before the size./line-height right after the size.caption, menu, …) alone.| Piece | Required? | Role |
|---|---|---|
font-size | Yes (shorthand form) | How large the text is |
font-family | Yes (shorthand form) | Must be the last value |
| style / weight / variant | No | Go before the size |
/line-height | No | Only right after size |
Switch shorthand presets and watch size, weight, and family change together.
Each snippet focuses on the font shorthand. Use Try It Yourself for a live editor.
The shortest valid shorthand: size, then family.
<style>
p {
font: 1.125rem system-ui, sans-serif;
}
</style>
<p>Hello CSS font shorthand.</p>1.125rem is the font-size.system-ui, sans-serif is the fallback stack.font-size and font-family rules for this case.Add line-height with a slash right after the size.
<style>
p {
font: 1.125rem/1.6 Georgia, serif;
}
</style>
<p>Readable body text with spacing.</p>1.125rem/1.6 means size then line-height./, 1.6 would not be treated as line-height here.Georgia, serif finishes the shorthand.Put optional style and weight before the size.
<style>
p {
font: italic bold 1.25rem Georgia, serif;
}
</style>
<p>Emphasized heading text.</p>italic and bold come before the size.1.25rem Georgia, serif finishes the required pair.font-style, font-weight, font-size, and font-family separately.Most invalid font rules miss size, family, or the slash.
font: bold alone is invalid. Include both a size and a family (unless you use a system keyword).
Put the typeface stack at the end. Style, variant, weight, and stretch go before the size.
Write 16px/1.5, not a bare second number after the size without /.
A font declaration clears related longhands to initial. Re-apply features like kerning or OpenType settings afterward if needed.
font: caption is valid. Mixing extras like font: caption 12px invalidates the declaration. Prefixed system names (-webkit-*, -moz-*) are non-standard.
font is a browser typography shorthand. Node.js, Deno, and Bun do not apply it.
Supported in Chrome, Firefox, Safari, Edge, Opera, and IE. System font keywords and stretch values have long-standing support.
Bottom line: Safe everywhere for size + family shorthand. Prefer longhands when you only need to change one font setting without resetting others.
font-size and font-family (family last).size/line-height, then the family.One line: font packs typography into one rule — size and family required, everything else optional.
Learn how to pick a typeface stack with fallbacks.
8 people found this page helpful