🔤 CSS font: — Complete Shorthand Tutorial

The CSS font: shorthand property lets you set **multiple font-related properties at once** — including font size, font family, weight, style, line-height, and more. It is powerful, compact, and commonly used in production stylesheets.

>>“font: is one of the most important CSS shorthands — it defines the entire text appearance in a single line.”

Note

✔ Mandatory values: font-size + font-family
✔ Optional values: style, weight, stretch, line-height
✔ Order matters

📦 Syntax

font shorthand syntax

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

/* Minimal */
font: 16px Arial;

/* Full example */
font: italic small-caps 600 condensed 18px/24px "Roboto", sans-serif;

📌 Properties Controlled by font:

PropertyControlled?Example
font-style✔italic
font-variant✔small-caps
font-weight✔700
font-stretch✔condensed
font-size✔ (required)16px
line-height✔1.5
font-family✔ (required)"Poppins"

🎨 1. Minimal Usage (Required Values Only)

Minimal example

p {
  font: 16px "Open Sans", sans-serif;
}

Only font-size and font-family are required.

🎨 2. Adding Font Weight

Weight

h1 {
  font: bold 32px/40px "Montserrat", sans-serif;
}

Sets weight + size + line-height + family.

🎨 3. Italic + Weight + Size + Family

Italic

em {
  font: italic 600 18px "Lora", serif;
}

🎨 4. Full Shorthand Example

Full

.title {
  font: italic small-caps 700 expanded 20px/28px "Merriweather", serif;
}

Applies every font-related property in one tidy declaration.

🎨 5. Using font: with System Fonts

System font

body {
  font: 15px/1.6 system-ui;
}

System fonts are fast and great for UI-like designs.

🎨 6. Using font: for UI Components

Button font shorthand

button {
  font: 600 14px/1 "Inter", sans-serif;
}

📌 Value Order — VERY Important

The property order must follow this exact pattern:

  • 1️⃣ font-style
  • 2️⃣ font-variant
  • 3️⃣ font-weight
  • 4️⃣ font-stretch
  • 5️⃣ font-size
  • 6️⃣ line-height (after a /)
  • 7️⃣ font-family

Note

If you put values in the wrong order → the shorthand breaks.

📌 Resetting Fonts Using Shorthand

Reset

* {
  font: inherit;
}

This sets font values back to the parent, often used in resets.

🧪 Real-World Use Cases

1️⃣ Typography Scale

scale

h1 {
  font: 700 48px/1.1 "Poppins";
}

h2 {
  font: 600 32px/1.2 "Poppins";
}

p {
  font: 400 16px/1.6 "Poppins";
}

2️⃣ Neumorphism UI Button

ui font

.btn {
  font: 500 14px/1 "Inter", sans-serif;
}

3️⃣ Dashboard Interface

dashboard

.menu-item {
  font: 14px/1.5 system-ui;
}

⚠️ Common Mistakes

  • ❌ Forgetting that font-size and font-family are required
  • ❌ Incorrect order of values
  • ❌ Mixing commas between properties (commas allowed ONLY between font families)
  • ❌ Expecting font to set text-transform or color (it does NOT)

Note

Using font: overrides ALL the longhand font-related properties at once.

🔥 Summary

The font: shorthand is essential for efficient, clean typography styling. It controls most font-related values, reduces code noise, and ensures text styles are predictable and consistent.

  • font-size + font-family → required
  • Order matters → keep syntax correct
  • Great for UI & typography systems
>>“Master the font shorthand, and your CSS typography becomes clean, expressive, and powerful.”