Font Loading Budget
Add your web fonts, pick a connection speed, and see total KB, estimated load time, and FOUT risk rating — all in one view.
Connection & Budget
ms
Fonts loading within this window are unlikely to cause visible FOUT.
Font Files
Quick add common stacks:
No font files added yet.
Budget Summary
Total Font Size
—
KB (transfer)
Font Files
—
separate requests
Estimated Load Time
—
ms on selected connection
FOUT Risk Rating
—
Add fonts and calculate to see your FOUT risk.
Low risk
High risk
Load Time by Connection
Calculate to see estimates.
Optimization Tips
Calculate to see recommendations.
Summary
Add your web fonts, pick a connection speed, and see total KB, estimated load time, and FOUT risk rating — all in one view.
How it works
- Add each font file you plan to load, entering its name and size in KB.
- Select the font format (WOFF2 compresses best; TTF is largest).
- Choose a connection speed to model (WiFi, 4G, 3G, or Slow 3G).
- Set your target load time budget in milliseconds.
- The calculator totals all font bytes and estimates download time.
- A FOUT risk rating shows the likelihood of unstyled text flashing before fonts load.
- Optimization tips appear based on your current configuration.
Use cases
- Auditing a font stack before launch to ensure it fits a performance budget.
- Comparing WOFF2 vs. TTF file size impact on load time.
- Deciding how many font weights are affordable on a given connection target.
- Evaluating variable fonts as a replacement for multiple separate weight files.
- Communicating font performance cost to designers requesting additional weights.
- Setting a font budget for a Core Web Vitals improvement sprint.
Frequently Asked Questions
Last updated: 2026-07-01 ·
Reviewed by Nham Vu