How to Use Font Shorthand in CSS: Syntax and Examples

Use the font shorthand property in CSS to set font style, weight, size, line height, and family all at once. The syntax is font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family]; with font-size and font-family required.

Syntax

The font shorthand property combines several font-related properties into one line:

• font-style: normal, italic, or oblique (optional)
• font-variant: normal or small-caps (optional)
• font-weight: normal, bold, or numeric values like 400, 700 (optional)
• font-size: required, e.g., 16px, 1rem
• line-height: optional, follows font-size after a slash, e.g., 1.5
• font-family: required, list of fonts or generic family

Order matters: font-size and font-family must be last, font-size is required, others are optional.

css

font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

Example

This example sets the font to italic, bold, 18 pixels size, 1.4 line height, and uses Arial or sans-serif fonts.

css

p {
  font: italic bold 18px/1.4 Arial, sans-serif;
}

Output

A paragraph with italic, bold text sized 18px with line height 1.4 using Arial or fallback sans-serif fonts.

Common Pitfalls

Common mistakes include:

• Omitting font-size or font-family, which are required.
• Wrong order of values, which causes the rule to be ignored.
• Using separate font properties after shorthand, which can override or conflict.

css

/* Wrong: missing font-size and font-family */
p {
  font: italic bold;
}

/* Correct: includes font-size and font-family */
p {
  font: italic bold 16px Arial, sans-serif;
}

Quick Reference

Property	Description	Example Values
font-style	Style of the font	normal, italic, oblique
font-variant	Small caps or normal	normal, small-caps
font-weight	Thickness of the font	normal, bold, 400, 700
font-size	Size of the font (required)	16px, 1rem, 120%
line-height	Height of each line (optional)	normal, 1.5, 120%
font-family	Font names or generic family (required)	Arial, 'Times New Roman', sans-serif

Key Takeaways

The font shorthand sets multiple font properties in one line for cleaner CSS.

Always include font-size and font-family when using font shorthand.

Order matters: font-size and font-family must come last in the shorthand.

Use the slash (/) to separate font-size and line-height if setting line-height.

Avoid mixing shorthand with separate font properties to prevent conflicts.