CSS

🎯 What is CSS font-family?

The font-family property defines which typeface is used for text in an HTML element. It controls how text visually appears (Arial, Roboto, Times New Roman, etc.).

It is one of the most important typography properties in CSS because it directly affects readability, design style, and user experience.

🔹 Basic Usage

CSS


p {
  font-family: Arial, Helvetica, sans-serif;
}

The browser first tries Arial, then Helvetica, then generic sans-serif.

💡 How font-family Works

If the first font is not available on the user’s device, the browser automatically switches to the next one in the list.

First font is preferred (primary)
Second font is fallback
Generic family is last backup

1️⃣ Family Name

Specific font names like Arial, Roboto or Times New Roman.

CSS


h1 {
  font-family: "Times New Roman", serif;
}

2️⃣ Generic Font Families

Value	Description
serif	Decorative strokes (Times New Roman)
sans-serif	Clean modern fonts (Arial)
cursive	Handwriting style fonts
fantasy	Decorative stylized fonts
monospace	Equal-width coding fonts

🧪 Example Usage

CSS


h1 {
  font-family: "Georgia", serif;
}

p {
  font-family: "Verdana", sans-serif;
}

code {
  font-family: "Courier New", monospace;
}

Different fonts improve readability and visual hierarchy.

3️⃣ initial & inherit

CSS


p {
  font-family: inherit;
}

initial → browser default font
inherit → takes parent font

📌 Summary

🧠 Key Points
font-family defines the typeface of text.
It improves design consistency and readability.
Always use fallback fonts for better compatibility.

CSS font-size

CSS font-style

CSS

CSS