CSS

CSS

🎯 What is CSS font?

The CSS font property is a shorthand property that allows multiple font-related settings to be defined in a single declaration.

Instead of writing several separate CSS properties, you can combine them into one concise line of code. This helps keep stylesheets cleaner, easier to read, and more maintainable.

The font shorthand can include the following properties:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family

🔹 Why Use the font Property?

When styling text, developers often need to define multiple font settings at once. Writing each property individually works perfectly, but it can make your CSS longer and harder to manage.

The font shorthand simplifies this process by combining multiple font settings into a single declaration.

Example

Instead of writing:

CSS

p { 
    font-style: italic; 
    font-weight: bold; 
    font-size: 18px; 
    line-height: 1.4; 
    font-family: "Poppins", sans-serif; 
}

You can write:

CSS

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

Both examples produce the same result.

🧩 CSS font Property Components

1️⃣ font-style

Defines the style of the text.

Common values:

  • normal
  • italic
  • oblique

Example:

CSS

font-style: italic;

2️⃣ font-variant

Controls alternative text styles such as small capitals.

Common value:

CSS

font-variant: small-caps;

3️⃣ font-weight

Defines the thickness of the text.

Common value:

  • normal
  • bold
  • 100 – 900

Example:

CSS

font-weight: 700;

4️⃣ font-size

Sets the size of the text.

Common units:

  • px
  • em
  • rem
  • %
  • pt

Example:

CSS

font-size: 18px;

5️⃣ line-height

Defines the vertical spacing between lines of text.

Example:

CSS

line-height: 1.5;

6️⃣ font-family

Specifies the font family used for displaying text.

Example:

CSS

font-family: Arial, sans-serif;

font-family: "Open Sans", sans-serif;

7️⃣ initial

Resets the font property to its default browser value.

Example:

CSS

font: initial;

8️⃣ inherit

Inherits the font settings from the parent element.

Example:

CSS

font: inherit;

📌 Syntax

CSS

selector { 
    font: font-style font-variant font-weight font-size/line-height font-family; 
}

⚠️ Important Notes

  • font-size and font-family are required when using the font shorthand.
  • If omitted, the shorthand declaration becomes invalid.
  • Properties that are not specified will be reset to their default values.
  • Using the shorthand property helps reduce CSS code and improves readability.

📊 Value Summary

Property Description
font-style Defines the text style
font-variant Controls small-cap text display
font-weight Defines text thickness
font-size Sets font size
line-height Controls line spacing
font-family Defines the font family
initial Resets to default value
inherit Inherits from parent element

  • 🧠 Summary

  • The CSS font property is a powerful shorthand property used to define multiple font settings in a single declaration.
  • It combines font style, weight, size, line height, and font family into one compact rule, making CSS code cleaner, more readable, and easier to maintain.
  • For modern web development, using the font shorthand is a recommended practice whenever multiple font properties need to be applied together.
CSS font
CSS font-face