Your Fonts Only Look Right on Your Computer

I spent a good while admiring this site's typography before I realized almost nobody else could see it.

On my screen, the labels were in a chunky pixel font straight out of an early-'90s Mac. The headlines were a warm serif. Everything looked right. In a clean browser, the pixel labels were plain old Consolas and the headlines were Georgia. Same site, completely different mood.

What happened

The stylesheet asked for the fonts by name:

font-family: 'Pixelify Sans', Consolas, monospace;

But nothing ever delivered them. No @font-face, no Google Fonts link, nothing. On my machine it didn't matter, because I had those fonts installed locally, so the browser found them and never complained. Everyone else's browser shrugged and moved down the list to Consolas.

It's the web design version of "works on my machine," and it's sneaky because nothing is broken from where you're sitting.

How to tell if it's happening to you

Try this

Open your site in a private window on a different computer, or on your phone. Or, in Chrome DevTools, select some text, open the Computed tab, and scroll to Rendered Fonts. That shows what's actually being drawn, not what you asked for.

The fix: self-host the files

You can link to Google Fonts, but I'd rather serve the files myself: no third-party requests, nothing to break later, and nothing to update in a privacy policy. Here's what that looks like:

1. Get the files. Fontsource packages open-source fonts as ready-made woff2 files. Grab only the weights and styles you use, and the Latin subset if that's all you need. My whole set came to about 250 KB.
2. Put them in your site's assets (mine live in /assets/fonts/), along with the license. Most open fonts use the SIL Open Font License, which is happy for you to do this as long as you include it.
3. Declare each one:

@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/pixelify-sans-latin-400-normal.woff2') format('woff2');
}

4. Preload the one or two you see first, so they don't pop in late:

<link rel="preload" href="/assets/fonts/pixelify-sans-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin>

Heads up

That crossorigin looks odd on a same-site file, but leave it in. Font preloads are fetched in CORS mode, and without it the browser downloads the font twice.

One small thing about font-display

font-display: swap shows the fallback font right away and swaps in the real one when it arrives. That means a brief flash of Consolas on a slow connection, but nobody ever stares at invisible text. For a blog, that's the right trade.

The best part? Now the site looks the same for everyone. Which, it turns out, was the whole point.