Two Ways to Set Typography on the Web
System fonts use typefaces already installed on the visitor's device. Web fonts download custom files so every visitor sees (nearly) the same design.
Both are valid. They solve different problems.
System Font Stacks
Example:
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
Advantages:
- Zero font download — excellent Core Web Vitals potential
- No commercial webfont license for the stack itself
- No Google Fonts CDN privacy concern
Limitations:
- Appearance differs across macOS, Windows, Android, and Linux
- You cannot guarantee a distinctive brand typeface
- Listing
Helvetica Neuein the stack does not let you self-host Helvetica files
Custom Web Fonts
Advantages:
- Consistent brand identity
- Access to distinctive commercial or OFL families
- Fine control over weights and language subsets
Costs:
- Bytes on the wire (mitigate with WOFF2 + subsetting)
- License management for commercial families
- Operational risk if unlicensed files are deployed
Legal Nuance People Miss
Using font-family: Arial, sans-serif is generally fine — the browser picks a local font. Uploading an Arial or Helvetica file to your CDN is a different act and may require a license.
Likewise, "we only use system fonts" is false if your theme still loads Inter from a self-hosted folder or Google CDN.
Decision Guide
| Priority | Prefer |
|---|---|
| Maximum performance / minimal compliance surface | System stack |
| Strong brand typography | Licensed or OFL web fonts |
| EU privacy sensitivity | Self-hosted OFL or system fonts |
| Enterprise brand guidelines mandate a family | Purchase the web license |
Hybrid Approach
Many products use system fonts for body UI and a single OFL display font for marketing headlines. That keeps personality without a large commercial license footprint.
Conclusion
System fonts are the lowest-risk default. Custom web fonts are a brand investment — budget the license and the performance work, then verify production only loads what you intended.