Web Font Performance Analyzer

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.