Font Loading Performance Calculator
Load impact from font file sizes.
About this calculator
This calculator estimates how much a page's web-font choices cost in load time, working from file count and size rather than measuring real network requests. Total font files is simply weights per family times number of families (e.g., two families each loaded in four weights is eight separate file downloads), and full payload is that file count times your average file size. Subsetting — serving only the glyphs a page actually uses, such as Latin-only characters instead of a full Unicode font — is modeled as a flat percentage-of-full-size reduction; a 100% value assumes no subsetting at all, while typical Latin subsets run 30–40% of a full file.
Download time comes from converting the subset payload to kilobits and dividing by your connection speed in kilobits per second, and the calculator adds a flat 30ms of per-request overhead for every individual font file to account for connection/handshake overhead even under HTTP/2 multiplexing. The FOIT risk score (Flash of Invisible Text) scales linearly with download time divided by 30, capped at 100 — it's a simplified heuristic, not a browser-verified metric, since real FOIT behavior depends on font-display settings and browser-specific fallback timeouts (commonly around 3 seconds) that this model doesn't simulate. Use the output to compare relative impact of subsetting or trimming weights, not as a precise Lighthouse-equivalent measurement — real-world results depend on caching, CDN performance, and font-display strategy.
Inputs
Results
Total font payload (KB)
360
How to Use This Calculator
- Enter Avg file size (KB), Weights per family, and Font families.
- Set Subset coverage (%) and Connection speed (Mbps).
- Review the Total font payload (KB) result.
- Use Total font files and Subsetting savings (KB) to inform your decision.
How the result changes with Avg file size (KB)
| Avg file size (KB) | Total font payload (KB) |
|---|---|
| 23 | 184 |
| 34 | 272 |
| 68 | 544 |
| 113 | 904 |
What each input means
- Avg file size (KB)
- Average size of each font file (WOFF2 typically 15–50 KB, TTF 50–200 KB).
- Weights per family
- Number of weights/styles loaded (e.g. Regular, Italic, Bold, Bold Italic = 4).
- Font families
- Number of different font families loaded (e.g. heading + body = 2).
- Subset coverage (%)
- Percentage of glyphs kept. Latin-only subset is ~30–40%. 100% = no subsetting.
- Connection speed (Mbps)
- User's download speed. 3G ≈ 1.5 Mbps, 4G ≈ 10 Mbps, broadband ≈ 50+ Mbps.
What each result means
- Total font payload (KB)
- Combined size of all font files after subsetting.
- Total font files
- Number of individual font files the browser must download.
- Subsetting savings (KB)
- Kilobytes saved by subsetting compared to full character sets.
- Savings (%)
- Percentage reduction from subsetting.
- Est. load time (ms)
- Estimated total download time including connection overhead.
- FOIT risk score
- Risk of visible Flash of Invisible Text (0 = minimal, 100 = severe). Keep below 30.
How this is calculated
Worked example, using the default values
- Identify Input Parameters4 parametersAvg file size (KB) = 45, Weights per family = 4, Font families = 2, Subset coverage (%) = 100 = 5 input(s) provided
- Calculate Total font payloadTotal font payload = fullPayloadKb * (subsetPct / 100)360 = 360
- Calculate Total font filesTotal font files8 = 8
- Calculate Subsetting savingsSubsetting savings = fullPayloadKb - subsetPayloadKb0 = 0
Engine last updated . Checked against 3 independently-derived tests — how we verify calculators. Built by Paul Gunder, a software engineer, not a licensed financial, medical, or legal professional.
Frequently Asked Questions
Why does adding more font weights hurt load time more than increasing the average file size?
Total font files is weights per family times number of families, and each additional file adds its own average file size to the total payload plus a flat 30ms of per-request connection overhead in this model — so going from 4 weights to 8 weights doubles both the payload contribution and the overhead contribution, while a proportional increase in average file size only affects payload. That's why trimming unused weights (dropping italic or a rarely-used light weight) is often a bigger win than trying to shrink individual files.
How much does subsetting actually save, and when should I use 100%?
The subset coverage percentage is applied as a flat multiplier on your full payload, so setting it to 35% (typical for a Latin-only subset) directly cuts both payload and download time by 65% versus the 100% baseline. Use 100% only if your content genuinely needs full Unicode coverage — multilingual text, special symbols, or a character set you can't predict in advance — since subsetting to just the glyphs your page actually renders is one of the most effective font-performance levers this calculator models.
What does the FOIT risk score actually measure, and is 30 a hard safety threshold?
The score is a simplified heuristic equal to your total load time divided by 30 and capped at 100 — it does not simulate real browser font-display behavior, fallback timeouts (commonly around 3 seconds), or caching, so it's a relative comparison tool rather than a measured guarantee. The suggested 'keep below 30' guidance is a rule of thumb pointing at roughly 900ms of load time, past which a Flash of Invisible Text becomes noticeably more likely to a real user on that connection.
Why does a fast connection speed not eliminate load time entirely?
Download time from payload size and connection speed can shrink toward zero on a very fast connection, but the calculator still adds a flat 30ms of overhead per font file to represent per-request connection costs that persist even under HTTP/2 multiplexing. So with many font files loaded, total load time has a floor set by file count times 30ms, regardless of how fast the underlying connection is.
Related Calculators
The questions that sit next to this one — chosen by subject, including calculators filed under a different category.
More in Creative, Media & Design.