Web Font Strategy:
the four steps I always run

Self-host the font

My first move is always to take the font off any third-party host and serve it from my own origin. A Google Fonts link sends the browser to two servers it has never talked to: one for a stylesheet, which blocks rendering, and another for the font file that stylesheet points at. Each new server costs a DNS lookup and a TLS handshake before a single byte moves. Self-hosting folds all of that into one request on a connection the page already opened.

A preconnect hint can start those handshakes earlier, but it can't remove the stylesheet in the middle. And the old argument that visitors already have Google's copy cached stopped being true around 2020, when browsers began keeping a separate cache for every site.

Owning the file also means owning its cache headers. My font files never change under the same name, so the browser can keep them for a year without ever asking again:

/assets/fonts/*
  Cache-Control: public, max-age=31536000, immutable

Speed is why I do it, but it pays twice: one fewer outside dependency, and nobody else's server seeing who visits. That last part isn't hypothetical: in 2022 a German court ordered a site owner to pay a visitor damages for embedding Google Fonts, because it sent their IP address to Google without consent.

Ship it as woff2

Format is the free win. woff2 is the most compressed web-font format there is, and every browser I support has read it for years. Same glyphs, a third of the bytes: JetBrains Mono Regular is 274 KB as a TTF and 92 KB as WOFF2.

So I serve WOFF2 and nothing else, one @font-face per weight, each pointing at a single file. No format fallbacks, no list of sources for the browser to work through.

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/jetbrains-mono-v24-latin-regular.woff2')
       format('woff2');
}

Subset, and cut the weights you don't use

In proportion, this is the biggest cut: WOFF2 already took the files down to a third, and the subset divides them by more than four again. A full font file carries Cyrillic, Greek, Vietnamese and hundreds of symbols this site never renders, so I serve the Latin subset only. It covers the Spanish half of the site too, because á, é, ñ, ¿ and ¡ all live in Latin, so one file serves both languages. The full WOFF2 is 92 KB; the Latin one is 21 KB.

Then I cut the weights down to the ones the design really uses. Here that's three, regular, medium and semibold, with no italics: every extra weight or style is one more file to fetch.

Preload the ones that matter

A browser doesn't request a font when it reads the @font-face. It waits until it has parsed the page, applied the styles and found text that actually uses that face. That's late, even with the CSS inlined like it is here. A preload in the <head> starts the download straight away, in parallel with everything else:

<link rel="preload" href="/assets/fonts/jetbrains-mono-v24-latin-regular.woff2"
      as="font" type="font/woff2" crossorigin />

Two details matter here. crossorigin isn't optional, even on your own domain: browsers always fetch fonts in CORS mode, so a preload without it doesn't match the real request and the font downloads twice. And I preload exactly the faces the first screen uses (here, all three) and no more. Preload everything and your fonts end up fighting your own critical assets for bandwidth.