CSS font Property

What You’ll Learn

The font property is a CSS shorthand that sets style, weight, size, line-height, and family in one declaration. It is a fast way to create consistent typography across your site.

Introduction

The font property in CSS is a shorthand property for setting various individual font-related properties in one declaration. These properties include font-style, font-variant, font-weight, font-size, line-height, and font-family.

Definition and Usage

By using the font property, you can quickly apply multiple font settings to an element, ensuring a consistent and cohesive typographic style across your website. Use it on body text, headings, buttons, and any element where you want to control how text looks with fewer lines of CSS.

📝 Syntax

The syntax for the font property can vary depending on which values are specified. Optional components come first, followed by mandatory font-size and font-family values:

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

Basic Example

p {
  font: italic small-caps bold 16px/1.5 Arial, sans-serif;
}

Default Value

The default value of the font property depends on the browser and operating system settings. Typically, it resolves to the browser's default font style, weight, size, and family for normal text.

Syntax Rules

• font-size and font-family are required in every valid shorthand declaration.
• Write line-height immediately after font-size with a slash: 16px/1.5.
• Order matters: style, variant, and weight must come before size.
• Always include a generic family fallback such as sans-serif or serif.
• The property is not inherited as a shorthand name, but its longhand components are inherited individually.

💎 Property Values

The font shorthand combines values from these individual properties:

System font keywords

CSS also allows system keywords such as caption, icon, menu, message-box, small-caption, and status-bar. These map to platform UI fonts and can be used alone: font: menu;

Common font Shorthand Patterns

Examples Gallery

In this example, we use the font property to set various font characteristics for a paragraph — plus simple body text, bold headings, and inherited button fonts.

<style>
  p {
    font: italic small-caps bold 16px/1.5 Arial, sans-serif;
  }
</style>

<p>
  This paragraph uses the font property to apply multiple font settings in one declaration.
</p>

body {
  font: 1rem/1.6 system-ui, sans-serif;
}

h2 {
  font: bold 1.5rem Georgia, serif;
}

button {
  font: inherit;
}

♿ Accessibility

• Use readable font sizes — body text is often 16px (1rem) or larger for comfortable reading.
• Keep sufficient line-height — values around 1.5 to 1.7 improve readability for long paragraphs.
• Do not rely on weight or style alone to convey meaning; use semantic HTML too.
• Test custom fonts for legibility and ensure fallback stacks are defined.
• Respect user zoom by preferring relative units like rem and em.

💡 Best Practices