Fonts
📌 Covered in this chapter:
font-family · Generic Families · Web-Safe · Web Fonts · @font-face · Font Loading · Weight · Style · Stretch · Variable Fonts · Fallback · Performance
Welcome to Chapter 16: Fonts — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
1Font Family & Generic Font Families
font-family — text render chese typeface stack. Browser first available font use chestundi left nundi right ki.
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
code {
font-family: 'JetBrains Mono', 'Fira Code', monospace;
}Generic families: serif, sans-serif, monospace, cursive, fantasy — ultimate fallbacks.
2Web-Safe Fonts, Web Fonts & @font-face
Web-safe fonts: Arial, Georgia, Times — system lo pre-installed. Web fonts — custom files download avuthayi.
CSS — @font-face
@font-face {
font-family: 'CustomBrand';
src: url('/fonts/custom-brand.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}font-display: swap — text immediately visible with fallback, custom font load ayyaka swap avuthundi. Performance ki critical.
3Font Weight, Style, Stretch & Variable Fonts
CSS
.heading {
font-weight: 700;
font-style: normal;
}
.emphasis {
font-weight: 600;
font-style: italic;
}
.variable-heading {
font-family: 'Inter', sans-serif;
font-weight: 350;
font-stretch: 95%;
}Variable fonts — single file lo weight, width, slant axes control. font-weight: 350 lanti fine values possible.
4Font Fallback & Performance
- Always provide fallback stack ending with generic family
- Use
woff2format — best compression - Preload critical fonts:
<link rel="preload" href="font.woff2" as="font" crossorigin> - Subset fonts — only needed characters include cheyandi
- Limit font families and weights — each file HTTP request