CSS

CSS allows you to control the appearance of text using font properties. This guide will cover everything about fonts in CSS, including font types, sizes, weights, styles, and advanced techniques.

---

1️⃣ Font Types in CSS

There are five major font families:

Font Type	Description	Example Fonts
Serif	Has small strokes at the ends of letters	Times New Roman, Georgia
Sans-serif	No strokes; clean and modern	Arial, Helvetica, Verdana
Monospace	Every letter takes up equal space	Courier New, Consolas
Cursive	Resembles handwriting	Brush Script MT, Comic Sans MS
Fantasy	Decorative and stylized	Papyrus, Impact

Example

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

📌 Tip: Always provide a fallback font in case the primary font isn’t available.

---

2️⃣ font-family – Defining the Font

The font-family property specifies which font should be used.

Example

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

📌 If “Arial” is unavailable, the browser will use any available sans-serif font.

---

3️⃣ font-size – Adjusting Text Size

Controls the size of the text. You can use:

• Pixels (px) – Fixed size
• Em (em) – Relative to the parent element
• Rem (rem) – Relative to the root (html) element
• Percentage (%) – Relative to the parent element
• View Width (vw) – Relative to the screen size

Example

p {
    font-size: 20px;
}

h1 {
    font-size: 2em; /* Twice the size of the parent element */
}

📌 1em = 100% of the parent font size
📌 1rem = 100% of the root font size

---

4️⃣ font-weight – Controlling Boldness

Defines how thick or thin the text appears.

Value	Effect
normal	Default text weight
bold	Makes text bold
lighter	Lighter than normal
bolder	Bolder than normal
100-900	Numeric values (100 = thin, 900 = extra bold)

Example

p {
    font-weight: bold;
}

h1 {
    font-weight: 700;
}

📌 Numeric values (100-900) offer more precise control.

---

5️⃣ font-style – Italic, Oblique, or Normal

Controls the appearance of the text.

Value	Effect
normal	Default text style
italic	Slanted text
oblique	Similar to italic (less common)

Example

p {
    font-style: italic;
}

---

6️⃣ font-variant – Small Caps Text

Defines small-caps formatting, where lowercase letters appear as smaller uppercase letters.

Value	Effect
normal	Default text
small-caps	Converts lowercase letters to small uppercase letters

Example

p {
    font-variant: small-caps;
}

📌 This is useful for titles and headings.

---

7️⃣ font – Shorthand Property

Instead of writing multiple properties, you can use font shorthand.

Syntax

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

Example

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

📌 Order matters! Always follow the correct sequence.

---

8️⃣ @font-face – Custom Fonts

You can use custom fonts in CSS using @font-face.

Example

@font-face {
    font-family: "CustomFont";
    src: url("custom-font.woff2") format("woff2");
}

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

📌 Font Formats

Format	Description
woff2	Recommended for modern browsers
woff	Works on most browsers
ttf	TrueType Font (large file size)
otf	OpenType Font

---

9️⃣ Google Fonts – Importing Web Fonts

Google Fonts provides free fonts that can be used directly in CSS.

Steps

1. Go to Google Fonts
2. Select a font and copy the @import or <link> code.
3. Use it in your CSS.

Example

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

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

📌 display=swap ensures text is shown even before the font fully loads.

---

🔟 Font Accessibility & Best Practices

✅ Use web-safe fonts for better compatibility.
✅ Provide fallback fonts to ensure proper rendering.
✅ Avoid using too many different fonts on a page.
✅ Use rem or em instead of px for scalability.
✅ Always import custom fonts asynchronously to prevent layout shifts.

---

🎯 Summary Cheat Sheet

Property	Effect
font-family	Defines font type
font-size	Sets text size
font-weight	Controls boldness
font-style	Italic, oblique, or normal text
font-variant	Small caps text
@font-face	Loads custom fonts
font	Shorthand property for all font styles

---

🔥 Final Example

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

body {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.6;
}

---

🚀 Conclusion

✅ Fonts play a crucial role in web design.
✅ Use Google Fonts or @font-face for custom typography.
✅ Avoid excessive font weights to optimize performance.
✅ Test fonts on different devices for better readability.