CSS font Property

CSS font Property

The font property in CSS is a shorthand for setting multiple font-related properties in a single declaration.

1. Syntax

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

✅ Not all values are required, but at least font-size and font-family must be included.

2. Basic Usage

✅ Setting Font with Shorthand

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

✅ This applies:

• italic → Font style
• small-caps → Font variant
• bold → Font weight
• 16px → Font size
• 1.5 → Line height
• Arial, sans-serif → Font family

3. Individual Properties in font Shorthand

Property	Description
font-style	Specifies italic, normal, or oblique.
font-variant	Enables small-caps text.
font-weight	Defines font thickness (normal, bold, 100–900).
font-size	Specifies text size (px, em, %, rem).
line-height	Controls space between lines.
font-family	Defines the font to be used.

4. Examples

✅ Simple Example (Font Size + Family)

h1 {
  font: 20px Georgia, serif;
}

✅ Applies Georgia font with 20px size.

✅ Full Font Shorthand Example

p {
  font: bold 18px/1.6 "Roboto", sans-serif;
}

✅ Bold, 18px font size, 1.6 line height, Roboto font.

✅ Setting Italic Small-Caps Font

p {
  font: italic small-caps normal 14px/1.4 "Verdana", sans-serif;
}

✅ Uses italic small-caps Verdana font.

5. When to Use font Shorthand?

✔ Saves space in CSS
✔ Improves readability
✔ Ensures consistent typography

6. Things to Remember

❌ Order matters! The font-family must be at the end.
❌ If font-variant, font-style, or font-weight are omitted, they default to normal.