Fonts and Font Stacks
The font-family property defines the preferred typeface. A font stack provides fallbacks in case a preferred font is unavailable.
System font stacks are often excellent for performance because they avoid downloading an additional web font.
Font Stack Selection
System Font Stack
body {
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}💡 The browser chooses the first available font in the stack.
Key Takeaways
- Always provide reasonable fallback fonts.
- System fonts can provide excellent performance and native appearance.
Knowledge Check
Why are multiple fonts commonly specified in `font-family`?