The Google Fonts <link> in this site’s <head> was one of those things I’d copy-pasted so early in the project I’d stopped seeing it. It worked, the fonts loaded, and I moved on to things that felt more important. Then I ran a waterfall trace and watched the whole page wait on a third-party domain before a single heading could render.
What the request was actually costing
A <link> to fonts.googleapis.com triggers a DNS lookup, a connection, a redirect to the actual font CSS, and then a second request to fonts.gstatic.com for the font files themselves — four round trips before any text using that font can paint, on a domain the browser has never talked to before if this is a reader’s first visit.
npm install @fontsource/bricolage-grotesque @fontsource/karla@import '@fontsource/bricolage-grotesque/700.css';
@import '@fontsource/karla/400.css';Self-hosting the two weights I actually use turned that into files served from the same domain as everything else, with the same cache headers, no DNS lookup, no redirect.
The part I didn’t expect
The bigger win wasn’t the request count. It was layout shift. Google Fonts’ font-display: swap meant the page briefly rendered in a fallback font and then jumped as the real font loaded in — a small but measurable shift on every single page load. Self-hosted files load fast enough, on the same connection as the HTML, that the swap is no longer visible in practice. The Lighthouse CLS number moved more than I expected from what felt like a small infrastructure change.