Font loading: what to get right first

It is rarely the thing that gets a project approved, and often the thing that decides how it goes. If you only fix one thing about font loading this quarter, make it the first item below.

Performance work is mostly subtraction, which makes it unpopular and effective. Most teams find the first pass takes an afternoon and the maintenance takes minutes a month.

Start here

Custom fonts commonly block the first paint. That sounds obvious written down. It is still the thing most often skipped. The failure mode is not doing it wrong, it is doing it once and assuming it stays done.

Then this

Self-hosting removes a third-party round trip. The teams that handle this well are rarely the ones with the biggest budgets. Check it against what you would want a competitor's site to get wrong.

Eventually

A sensible fallback prevents invisible text. The reasoning matters more than the rule, because the rule has exceptions. Check it against what you would want a competitor's site to get wrong.

What this looks like day to day

Real-world numbers from actual visitors matter more than a score produced on a fast laptop. Three things worth confirming about font loading before you move on:

• Someone can say what the current setup is without going to look
• Self-hosting removes a third-party round trip — and you know whether that is true here
• There is a way to tell whether the last change to this helped

If you are not sure where your systems currently stand on this, it takes us about an hour to find out.