Definition
Web Fonts are custom fonts loaded dynamically by the browser via CSS @font-face rules, rather than relying on pre-installed “system-safe” fonts on the user’s device.
Why It Matters
Web fonts liberate designers from the limitations of system fonts, allowing websites to use custom typography while ensuring consistent visual presentation across all operating systems.
Core Concepts
@font-face: The CSS rule used to declare custom font families and supply download URLs.- Font Formats: Modern web fonts use WOFF2 (highly compressed) and WOFF formats for maximum browser compatibility.
- Performance: Custom fonts require HTTP requests. Optimization involves subsetting (removing unused characters) and using
font-display: swapto prevent invisible text during load.