System Fonts vs Custom Web Fonts: Performance Tradeoffs

When architecting a typography system, teams face a strategic decision:

1. Native System Font Stack: Uses the operating system's pre-installed default font (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif):
   • Pros: Zero network payload (instant 0ms loading), no layout shift (CLS = 0), native OS feel (feels like an Apple app on Mac, an Android app on Pixel).
   • Cons: Brand expression varies slightly across platforms.
2. Custom Web Fonts (e.g., Inter, Plus Jakarta Sans, Geist):
   • Pros: Perfectly identical visual identity across every browser and operating system.
   • Cons: Requires 50–150KB of font files; risks FOIT (Flash of Invisible Text) or FOUT (Flash of Unstyled Text) during slow network connections.