Self-Hosting Web Fonts Without Overcomplicating It

Self-hosting a web font gives you control over the request, cache policy, and files your visitors download. It also makes you responsible for all three.

I would self-host when privacy, reliability, or precise font subsets matter. I would not do it merely because a local font must always be faster; performance depends on the files, cache, delivery, and existing connections.

Start with WOFF2

For modern browsers, WOFF2 is normally the format to serve. Its browser support is broad, and it compresses fonts well. Add older formats only if your actual audience needs them.

@font-face {
  font-family: "Cool Font";
  src: url("/fonts/coolfont.woff2") format("woff2"),
       url("/fonts/coolfont.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

body {
  font-family: "Cool Font", sans-serif;
}

The URL is resolved relative to the stylesheet, unless it begins at the site root as shown above. A broken path silently leaves you looking at the fallback font, so confirm the request in DevTools.

Define a separate face for each weight and style you ship. Do not declare a regular file as every weight and expect the browser’s synthetic bold to match the real design.

Ship fewer files

Fonts can become a large part of a page. Prefer WOFF2, subset characters only when that is safe for the languages you publish, and include only weights that appear in the design.

font-display: swap shows fallback text while the font loads. Other values may fit a particular design, but hiding readable text while a decorative font arrives is rarely a trade I want.

Set a long cache lifetime for versioned font URLs. If /fonts/coolfont.woff2 can change without its name changing, a long cache can leave old copies around for longer than expected.

Check the licence first

Owning a desktop font licence does not automatically grant web embedding rights. Read the licence for self-hosting, permitted domains, traffic limits, modification, and subsetting before converting or uploading files.

Finally, keep a good fallback stack and test slow loading. The page should remain usable when the custom font fails. Self-hosting gives you control, not immunity from networks doing what networks do.

← Back to all articles