Font Loading Waterfall Reviewer
See when font requests start and finish, compare recordings, and leave a clear investigation plan for your next performance pass.
Request waterfall
Select a request for details. Timing overlap alone does not establish that a font delayed painting. A font can finish after FCP while fallback text is already visible.
Recording comparison
Review font delivery with the right evidence
- Capture. Export a sanitized HAR from your browser, or import Resource Timing JSON / a CSV timing list.
- Align. Supply FCP in the same time origin as the recording. HAR times here start at its earliest request, which can differ from navigation start.
- Investigate. Read the waterfall and compare like-for-like recordings. Check font usage and CSS font-display in your site before changing loading priorities.
This tool reads local evidence. It does not visit URLs, download font files, calculate Web Vitals or infer text-rendering behavior. Imported review files retain font URLs and notes, but not HAR cookies, request/response headers or bodies. URLs themselves may contain sensitive query values. File limits: 10 MiB per file, 20 MiB per import, 12 recordings, 2,000 font requests per recording.
Supported input formats
CSV or JSON rows: url, startMs, durationMs; optional type=font, family, weight, status, transferBytes. Resource Timing JSON accepts name, startTime, duration and initiatorType or font filename extensions. HAR reads log.entries and detects fonts by MIME type, resource type or filename. HTTP error status is separate from the FCP comparison.
Chrome DevTools: export a HAR. Gather routes and viewport states separately, with consistent cache settings.
Using Font Loading Waterfall Reviewer
Inspect imported font request timelines against a supplied first-contentful-paint milestone and compare recordings.
- Try the editorial-site example or import sanitized HAR, Resource Timing JSON or timing CSV. Each file becomes a recording.
- Select a recording and supply FCP in its exact time origin. For HAR, the plotted origin is the earliest imported request, which may differ from navigation start.
- Select a request to inspect timing, HTTP status and transfer evidence. Add family/weight labels and investigation notes, then save them.
- Choose a comparison recording to match exact font URLs. Export timing CSV, a normalized report or a reopenable review project.
Example
Cold-cache and earlier-discovery recordings of an editorial page demonstrate a regular face, late bold face, icon font and a retired URL returning HTTP 404. The timings are synthetic examples, not predicted results.
Questions & answers
Does finishing after FCP prove a font delayed painting?
No. This is a timing relationship only. Fallback text may already be visible, and usage and CSS font-display are not available from request timing alone.
How do I align FCP with a HAR?
HAR requests are plotted relative to the earliest request in that file. Supply FCP relative to that origin. An incomplete HAR can start after navigation, so a navigation-relative FCP needs adjustment.
Does the review keep sensitive HAR data?
Only normalized font URLs, timing/status/transfer fields, labels and notes are retained. Cookies, headers and bodies are omitted. Font URLs may still contain sensitive query parameters.
What does a zero transfer size mean?
It is retained as supplied evidence. This tool does not infer a cache hit from zero alone.
Can I compare different recordings?
Yes, requests match by unique exact URL. Repeated or missing URLs are shown as unmatched. Align origins and recording conditions before interpreting differences.
Help improve this tool
Report a problem or suggest an improvement
Describe the issue without pasting private tool input. Feedback goes to our admin inbox.
