Custom fonts in WordPress: Google Fonts, self-hosting, and performance

Fonts are one of the easiest things to get visually right and technically wrong in WordPress. Here's how the loading side actually works.

How most templates load fonts by default

Many WordPress themes load Google Fonts via a direct link to Google's servers, referenced in the theme's header. This is simple and works everywhere, but it means every visitor's browser makes an extra request to a third-party domain before your text can render — and in some regions, that request can be slow or blocked outright.

Why self-hosting fonts is usually better

Self-hosting means downloading the font files and serving them from your own domain alongside your other assets. This removes the third-party request entirely, which is both faster and avoids third-party-domain privacy concerns some visitors (and some regional regulations) care about. Most fonts used on the web are open-licensed specifically for this kind of self-hosting.

The trade-off: someone has to keep the files updated

Google's hosted version updates automatically when a font family gets a new weight or an optimization; a self-hosted copy is frozen until someone manually re-downloads and replaces it. For a small, fixed set of font weights on a business site, this is rarely an issue in practice.

Loading fonts without a layout jump

A common visual bug: the page renders briefly in a fallback font, then "jumps" as the custom font finishes loading and text reflows. Two fixes help here — using font-display: swap in the font's CSS declaration (so text is visible immediately in a fallback font rather than invisible while waiting), and choosing a fallback font with similar letter proportions to minimize how much the layout shifts when the swap happens.

Don't load more weights than you use

It's easy to end up loading six font weights when a design only actually uses two. Every additional weight is a separate file the browser has to download — audit your CSS for which font-weight values are genuinely used, and trim the font file to match.

The practical setup

For a typical business site: pick two font families (one for headings, one for body text), self-host only the specific weights you actually use, and add font-display: swap. That combination covers the performance and visual-stability concerns that trip most sites up.