Self-Host Web Fonts
Host font files on your own server to eliminate the Google Fonts DNS and connection overhead.
Metrics
This technique can move up to 67% of LCP's share of the Lighthouse score.
This technique does not move TBT.
This technique can move up to 33% of CLS's share of the Lighthouse score.
This technique can move up to 67% of FCP's share of the Lighthouse score.
This technique can move up to 33% of SI's share of the Lighthouse score.
This technique does not move TTFB.
Overview
Google Fonts is the most popular font CDN, but it requires two separate origins: fonts.googleapis.com for the CSS and fonts.gstatic.com for the font files. Each origin requires a DNS lookup, TCP handshake, and TLS negotiation — adding 200–600 ms of latency before the first font byte arrives. Self-hosting copies the WOFF2 files to your own server, eliminating both external origins entirely.
Impact grade, A+ to D: how much of the Lighthouse score this technique can move. Unaffected: TBT, TTFB.
The Problem
When a browser encounters a Google Fonts <link>, it first fetches the CSS from fonts.googleapis.com, parses it to discover the actual font file URLs, then fetches those files from fonts.gstatic.com. This two-hop chain — combined with the connection overhead for two new origins — means no font data arrives until 300–700 ms after navigation starts. During this window, browsers either hide text (FOIT) or show a fallback font that shifts layout when the web font arrives.
Performance Impact
LCP
100–400ms
if LCP element contains text rendered in the web font
CLS
0.03–0.12
font arrives sooner, reducing the window for fallback-to-web-font shift
FCP
100–500ms
font CSS resolves from same origin, no cross-origin handshake
SI
fonts served from the same origin avoid cross-origin connection overhead; text renders sooner, removing blank text slots from the visual timeline
Risk: Low
font files do not change — safe to cache aggressively
How it works
01
Download the font files
Use google-webfonts-helper (gwfh.mranftl.com) to download WOFF2 files for your chosen font, weights, and subsets. Download only the weights you actually use — each unused weight adds unnecessary bytes.
02
Upload and host the files
Place the WOFF2 files in your theme’s
/fonts/directory or a dedicated CDN path. Serve them with a longCache-Control: max-age=31536000, immutableheader — font files never change for a given URL.03
Write @font-face declarations
Replace the Google Fonts
<link>with@font-facerules pointing to your hosted files. Addfont-display: swapandunicode-rangeto load only the character sets present on the page.04
Remove the Google Fonts link tag
In WordPress, dequeue the Google Fonts stylesheet in
functions.phpusingwp_dequeue_style(). Themes like Twenty Twenty-One and many commercial themes enqueue Google Fonts by default — remove the enqueue hook rather than filtering the HTML.
Limitations
- You are responsible for keeping font files up to date if the font designer releases updated versions.
- Self-hosted fonts lose the shared-cache benefit of Google Fonts CDN — though cross-site font cache partitioning in modern browsers means this benefit no longer exists anyway.
- Variable fonts can replace multiple weight files with one file but are larger — test whether the single file is smaller than the sum of the specific weight files you use.
Common Mistakes
Downloading all font weights and styles just in case
Each weight (400, 600, 700) and style (italic) is a separate WOFF2 file. Only download the exact combinations your CSS uses — unused weights are pure wasted bandwidth on every page load.
Keeping the Google Fonts preconnect hints after self-hosting
Preconnect to an origin you no longer use wastes a TCP/TLS handshake. Remove all fonts.googleapis.com and fonts.gstatic.com preconnect tags once self-hosting is in place.
Need help applying this to your site?
Targeted fixes, not guesswork. We identify which techniques move the needle for your specific WordPress stack.
Start an Engagement