Web Fonts and Icons
📌 Covered in this chapter:
Google Fonts · Local Fonts · Font Loading · Icon Fonts · SVG Icons · Accessibility · aria-hidden · Icon Buttons · Fallback · Performance
Welcome to Chapter 18: Web Fonts and Icons — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
1Google Fonts & Local Fonts
HTML — Google Fonts▶ Try in Editor
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; }
</style>Local fonts — self-host for privacy, GDPR, and faster CDN control. @font-face with font-display: swap.
2SVG Icons vs Icon Fonts
Icon fonts (Font Awesome) — legacy, accessibility issues. SVG icons — modern standard, scalable, style with CSS.
HTML — Accessible Icon Button
<button type="button" aria-label="Close dialog">
<svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24">
<path d="M6 6l12 12M18 6L6 18" stroke="currentColor"/>
</svg>
</button>aria-hidden="true" — decorative icons screen readers skip chestayi. Meaningful icons ki aria-label on button mandatory.
3Performance & Fallback Icons
- Preload only critical font weights (400, 600)
- SVG inline for above-fold icons — no extra request
- Fallback: Unicode symbols or text label if icon fails
- Icon sprite sheets for many repeated icons