Fix library

Why you should self-host your web fonts

The Brimm team · grounded in the docs

Fonts loaded from a third-party CDN cost you on 2 fronts. Performance first: “On paper, using a self-hosted font should deliver better performance as it eliminates a third-party connection setup,” per web.dev's font best practices. Privacy second: in January 2022 a Munich court ruled that embedding Google Fonts leaked a visitor's IP address to Google in violation of the GDPR. Download the woff2 files, serve them from your own origin, and both problems end. Brimm does exactly this.

The symptom: your text waits on someone else's server

Your page loads, and for a moment the text is invisible or flashes from one typeface to another. Behind that moment is a chain of requests leaving your site: a stylesheet from a font provider's origin, then the font files themselves from another. Each new origin costs a DNS lookup, a TCP connection, and a TLS handshake before a single byte of font arrives. On a fast connection you barely see it. On a phone on cellular, your headline is waiting on infrastructure you do not control.

There is a second symptom most owners never see. Every one of those requests carries the visitor's IP address to the third party. Your reader asked to see your page. Their browser told a font CDN about it as the price of admission.

The cause: the copy-paste embed nobody revisited

Almost every site gets here the same way. At build time, someone picked a typeface, copied the two-line embed snippet from a font service, pasted it into the template, and moved on. It worked, so it was never questioned. The snippet quietly made a third-party origin a render-critical dependency of every page on the site.

The performance cost is the connection setup described above. The legal exposure is concrete. In January 2022 the Landgericht München, a regional court in Munich, ruled that a website embedding Google Fonts from Google's servers transmitted the visitor's IP address without consent and violated the GDPR. The award was small and it is one regional ruling, not a global ban. We will not inflate it into more than it is. But it established plainly that serving fonts from a third party is a data transfer your visitors never agreed to, and German firms sent waves of demand letters to site owners on the strength of it. Self-hosting removes the entire question.

The fix: bring the fonts home

Self-hosting takes about an hour and rarely needs to be touched again:

Download the woff2 files. For open-license fonts, get the official woff2 from the font's own repository or a subsetting tool. woff2 is the only format you need for modern browsers.
Serve them from your own origin, for example under /fonts/, and write your own @font-face rules with font-display: swap so text renders immediately in a fallback and swaps when the font lands.
Preload your primary font so the browser finds it early instead of discovering it deep in the CSS. Preload only the one or two files the first paint needs. The same web.dev guidance is blunt that preload “comes at the cost of taking away browser resources from the loading of other resources.”
Remove the third-party snippet. The embed stylesheet, and any preconnect hints pointing at the font provider, come out. Check your license permits self-hosting; open-license fonts do, some commercial services require their own hosting.

<!-- In the head: preload the file the first paint needs -->
<link rel="preload" href="/fonts/yourfont-var-latin.woff2"
      as="font" type="font/woff2" crossorigin />

/* In your CSS: your own @font-face, no third-party origin */
@font-face {
  font-family: "YourFont";
  src: url("/fonts/yourfont-var-latin.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
}

This page practices what it preaches. The two fonts you are reading, Bricolage Grotesque and Spline Sans Mono, are woff2 files served from our own origin with exactly this markup. No request leaves brimmapp.com to draw this text. We built it that way because our own audit flags third-party font origins, and an honesty brand does not ship what it penalizes.

Be honest: self-hosting is not a magic speed boost

The same web.dev article that recommends eliminating the third-party connection also cautions that “in practice, the performance differences between these two options is less clear cut,” because big font CDNs are fast and well cached. If your own hosting is slow, self-hosted fonts can lose the race. So we will not promise you a dramatic speed win, and you should distrust anyone who does. The honest case is control plus privacy: one less origin that can slow or break your render, and zero visitor data handed to a third party as a side effect of your typography. Measure before and after if speed is your motive.

While you are in there, check what else leaves your origin. Icon fonts, JavaScript libraries from public CDNs, embedded widgets: each is another connection cost and another party your visitors are introduced to without being asked. You do not have to eliminate them all. You should know they are there and be able to defend each one.

Verify: watch the network, then run the audit

Open your browser's dev tools, load the page fresh, and filter the network panel by font. Every font request should come from your own domain. Then confirm text is visible immediately on a throttled connection, which proves font-display: swap is doing its job, and check that no stray preconnect or stylesheet still points at the old provider.

Then confirm it the way we would. Paste your site into the Brimm audit and we will list every third-party origin your page depends on, fonts included, and flag the ones that block render. Head hygiene compounds: while you are cleaning the head, make sure your Article schema is complete, and see what answer engine optimization is for why every dependency you remove makes the machine's read of your page cleaner. The rest of the fix library continues from there.