Why Self-Hosting Fonts Matters
When your site loads fonts from an external service like Google Fonts, the browser must perform a DNS lookup, establish a connection, and negotiate TLS — all before the first byte of font data arrives. These extra network steps add latency to every page load, and that latency directly delays when text becomes readable.
Self-hosting means serving font files from your own domain (or CDN) instead of a third-party service. Because the browser already has a connection open to your domain, self-hosted fonts skip the overhead of connecting to an additional server. This typically saves 100–300ms on the critical rendering path.
The Performance Cost of External Font Services
Loading fonts from Google Fonts involves at least two network hops. First, the browser fetches a CSS stylesheet from fonts.googleapis.com. Then it downloads the actual font files from fonts.gstatic.com. Each domain requires its own DNS lookup and TLS handshake — on a mobile connection, that can mean 200ms or more per domain before any data transfers.
This overhead matters because fonts are render-blocking by default. Until the browser has the font data, it either shows invisible text (a flash of invisible text, or FOIT) or falls back to a system font (a flash of unstyled text, or FOUT). Either way, longer font loading times mean a worse experience for visitors and a slower Largest Contentful Paint when text is the LCP element.
How Self-Hosting Works
Self-hosting fonts means downloading the font files (typically WOFF2 format) and placing them on your server. You then reference them with @font-face rules in your own CSS instead of linking to an external stylesheet.
The key benefits:
- No extra DNS lookups — fonts load from the same domain the browser already connected to.
- Full caching control — you set the cache headers, so fonts can be cached for months or longer.
- No third-party dependency — your fonts load even if Google Fonts has an outage or changes their service.
- Privacy — no visitor data is sent to third-party font servers. In some jurisdictions (particularly the EU under GDPR), loading fonts from Google Fonts without consent has been ruled a violation.
What to Watch For
Self-hosting is not automatically better if the font files themselves are not optimized. Serving the full character set of a font when you only need Latin characters wastes bandwidth. Subsetting — stripping unused character ranges — is an important step when self-hosting. Tools like glyphhanger or Google’s own google-webfonts-helper can generate subsetted WOFF2 files.
You should also pair self-hosted fonts with the font-display: swap descriptor to avoid invisible text while fonts load. And if you are using more weights and styles than you need, self-hosting alone will not solve the underlying problem of too many font files.
WordPress-Specific Considerations
Some WordPress themes and plugins enqueue Google Fonts stylesheets automatically. Simply adding self-hosted font files without dequeuing the external stylesheets means you are loading fonts twice — from your server and from Google — which is worse than either approach alone. Check your theme’s settings for a “disable Google Fonts” option, or use a plugin like OMGF (Optimize My Google Fonts) to automate the conversion.
Further Reading
- Self-host your web fonts (web.dev) — Google’s own recommendation for self-hosting and the performance rationale behind it.