Google Fonts Performance: Real Site Audit
Google Fonts is convenient but rarely fast out of the box. Here is what I found auditing real sites and how I fix the common issues. I audited the font loading setup of thirty live sites that use Google Fonts, measuring real user metrics with the web-vitals library and comparing them against the Lighthouse lab numbers. The gap between lab performance and field performance was wider than I expected, and the same handful of issues appeared on most sites. Here is what I found and how I address each problem. Issue One: Loading the Full Family The most common problem was sites loading every weight of a font family when they only used two or three. Google Fonts generates a URL that requests specific weights, but the default snippet some CMS platforms inject requests the entire family. The result is a CSS file that references a dozen font files, of which the browser downloads all that match the page content. Cutting the request to the weights actually used reduced the CSS size and the number of font file requests significantly. <link href='https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap' rel='stylesheet'> Specifying only the weights you use, in this case four hundred, six hundred, and seven hundred, keeps the generated CSS lean. I audit every Google Fonts URL in a project and remove any weight that does not appear in the design.