Web Font Performance Analyzer
Paste your @font-face CSS or Google Fonts link and get a performance score with actionable recommendations. Check WOFF2 usage, font-display, preload hints, subsetting, and more.
How the Web Font Performance Analyzer Works
This tool parses your @font-face declarations and Google Fonts links to evaluate ten key performance metrics. Each check is scored individually and combined into an overall score out of 100. The analyzer examines font format usage, display strategies, preloading opportunities, subsetting, file count, weight count, format fallback chains, local source priority, CLS prevention properties, and variable font adoption. All analysis runs entirely in your browser with no data sent to any server.
Why Web Font Performance Matters
Web fonts are one of the most impactful resources on page load performance. Poorly optimized fonts cause Flash of Invisible Text (FOIT), Flash of Unstyled Text (FOUT), and layout shifts that hurt Core Web Vitals scores. A single unoptimized Google Fonts request can add 200-500ms to your Largest Contentful Paint. Using WOFF2 format reduces font file sizes by 30 percent compared to WOFF and over 50 percent compared to TTF. The font-display property controls how text renders while fonts load, and preconnect hints eliminate DNS lookup delays for external font servers.
Key Font Performance Best Practices
The most impactful optimization is using WOFF2 format exclusively with WOFF as a fallback for older browsers. Set font-display to swap or optional depending on your use case. Swap shows fallback text immediately and switches when the font loads, while optional gives the browser permission to skip the font entirely on slow connections. Add preconnect hints for external font origins like fonts.googleapis.com and fonts.gstatic.com. Use unicode-range to subset fonts so browsers only download the characters needed for the current page language.
Keep your font file count under six and weight count under four per family. Each additional file is a separate HTTP request that competes for bandwidth. Variable fonts solve this by containing all weights and styles in a single file, reducing requests and total download size. When using @font-face, list local() sources first so the browser can use fonts already installed on the user's system without downloading anything. Properties like size-adjust, ascent-override, and descent-override on fallback fonts prevent layout shifts when the web font loads.
Google Fonts URL Optimization
Google Fonts URLs support several optimization parameters. The display parameter controls font-display behavior and should always be set to swap or optional. The text parameter subsets the font to only include specific characters, dramatically reducing file size for logos or headings that use limited characters. Combining multiple families into a single URL reduces HTTP requests. This analyzer checks your Google Fonts URLs for these optimizations and suggests improvements. For self-hosted fonts, the analyzer evaluates your @font-face declarations against the same best practice criteria used by Lighthouse and PageSpeed Insights.
Understanding the Performance Score
The overall score weights each check based on its real-world impact. WOFF2 usage and font-display carry the highest weight because they have the largest effect on perceived load time and Core Web Vitals. File count and weight count are weighted moderately because excess requests compound on slow connections. Variable font usage and CLS prevention properties are bonus checks that reward advanced optimization. A score above 80 indicates well-optimized fonts. Below 50 means significant performance improvements are available. The recommendations section provides specific CSS code you can copy and apply immediately.
Frequently Asked Questions
What font formats does the analyzer check for?
The analyzer checks for WOFF2 (best compression, 95%+ browser support), WOFF (fallback for older browsers), TTF/OTF (legacy formats), and variable font formats. WOFF2 is recommended as the primary format with WOFF as fallback.
What is font-display and which value should I use?
font-display controls how text renders while web fonts load. Use "swap" for body text so users see content immediately with a fallback font. Use "optional" for non-critical decorative fonts so the browser can skip them on slow connections. Avoid "block" which hides text for up to 3 seconds.
How many font files is too many?
More than 6 font files per page significantly impacts load time. Each file is a separate HTTP request. Consider using a variable font (single file for all weights) or limiting to 2-3 weights per family. Most designs work well with regular and bold only.
Is my font CSS sent to any server for analysis?
No. All analysis runs entirely in your browser using JavaScript. Your CSS code and font URLs never leave your device. This makes the tool safe for proprietary font configurations and internal projects.
What are size-adjust and ascent-override?
These CSS properties fine-tune fallback font metrics to match your web font, preventing layout shifts (CLS) when the web font loads and replaces the fallback. They are applied to the fallback @font-face declaration and are a key technique for improving Cumulative Layout Shift scores.
Does the analyzer work with Google Fonts URLs?
Yes. Paste a Google Fonts URL and the analyzer extracts family names, weights, and display settings. It checks for the display parameter, number of families and weights, and suggests optimizations like preconnect hints and self-hosting for better performance.