📘 CSS FONTS — COMPLETE NOTE

🎯 1. Why Fonts Matter

Fonts make a website:

• modern
• readable
• unique

👉 Example:

• ❌ Times New Roman → outdated
• ✅ Open Sans → modern

👉 Developer must implement fonts from design

🔤 2. What is a Font?

A font = set of:

• letters
• numbers
• symbols

🧠 Font Families (Types)

Main groups:

• serif → with small lines (Times New Roman)
• sans-serif → clean (Arial, Open Sans)
• monospace → equal width (code fonts)
• decorative
• handwritten

💡 Default font

👉 Browser default = serif (Times New Roman)

🔹 3. font-family

🧠 What it does

Sets the font of text

📊 Syntax

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

🧠 How it works

👉 Browser tries fonts from left to right

1. Helvetica
2. Roboto
3. Verdana
4. fallback → sans-serif

⚠️ Important

Always include fallback:

sans-serif
serif
monospace

🎯 Example

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

👉 Georgia if available 👉 otherwise → serif

🔹 4. Main Font of Page

🧠 Best practice

Set font on body

body {
  font-family: "Helvetica Neue", "Roboto", "Verdana", sans-serif;
}

🎯 Override example

.page-title {
  font-family: "Tahoma";
}

📄 Example

body {
  font-family: Arial, sans-serif;
}

h1 {
  font-family: Georgia, serif;
}

.button {
  font-family: Roboto, sans-serif;
}

👉 Main font = Arial

🔹 5. font-size

🧠 What it does

Sets text size

📊 Syntax

.text {
  font-size: 20px;
}

💡 Default size

👉 16px

🎯 Examples

h1 {
  font-size: 24px;
}

h2 {
  font-size: 20px;
}

p {
  font-size: 16px;
}

📌 Real example

.page-title {
  font-size: 24px;
}

.section-title {
  font-size: 20px;
}

.club-list .link {
  font-size: 14px;
}

🔹 6. font-weight

🧠 What it does

Controls thickness (boldness)

📊 Values

Numbers:

100 → thin
400 → normal
700 → bold
900 → very bold

🎯 Examples

.title {
  font-weight: 400;
}

.text {
  font-weight: 700;
}

💡 Keywords

normal = 400
bold = 700

👉 Numbers are better (more precise)

🎯 Real example

.page-title {
  font-weight: 500;
}

.section-title {
  font-weight: 500;
}

.link {
  font-weight: 500;
}

🔹 7. font-style

🧠 What it does

Controls text style

📊 Values

normal
italic

🎯 Example

.title {
  font-style: italic;
}

👉 Text becomes italic

🔥 8. Custom Fonts

🧠 Why use them?

👉 Make website unique

🟢 Google Fonts

Free font library

📌 Steps

1. Choose font
2. Copy link
3. Add to HTML
4. Use in CSS

📄 HTML Example

📊 CSS Example

body {
  font-family: "Tangerine", cursive;
}

⚡ Performance Tip

👉 Use only needed weights 👉 Too many fonts = slow site

🔹 9. Example with 2 Fonts

body {
  font-family: "Poppins", sans-serif;
}

.page-title {
  font-family: "Oswald", sans-serif;
}

👉 Body → Poppins 👉 Headings → Oswald

🔹 10. @font-face

🧠 What it is

Low-level font definition

📊 Example

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 700;
  src: url('font.woff2') format('woff2');
}

📌 Properties

• font-family → name
• font-style → normal/italic
• font-weight → thickness
• src → font file
• font-display → loading behavior

🧠 Important

👉 This is what Google Fonts uses internally

🔹 11. Unicode Range

Defines which characters are loaded

👉 smaller range = faster loading

🧠 FINAL SUMMARY

👉 font-family → sets font 👉 font-size → text size 👉 font-weight → thickness 👉 font-style → italic

👉 Use:

• body → main font
• override where needed

👉 Google Fonts → easy custom fonts 👉 @font-face → advanced usage

💪 BEST PRACTICES

👉 Use max 1–2 fonts 👉 Always add fallback 👉 Use numbers for font-weight 👉 Optimize loading