Skip to main content

Optimize Google Fonts

Fonts can become render-blocking work and they can trigger layout shift when the final font loads. If your site uses Google Fonts, the fastest path is usually: reduce what you load, serve it locally, and preload only what the above-the-fold content truly needs.

Decision Order​

  1. Can you use a system font stack? If yes, remove Google Fonts.
  2. If you need a brand font, self-host a WOFF2 (ideally a variable font).
  3. Use font-display: swap and an explicit fallback stack.
  4. Preload only the font file used for above-the-fold text.

Perfmatters Approach​

Perfmatters can help you localize Google Fonts and apply swap behavior.

Location:

WP Admin -> Perfmatters -> Assets -> Google Fonts

Common options (names can vary by version):

  • Local Google Fonts (download + serve from your site)
  • Display Swap (font-display: swap)
  • Remove/disable Google Fonts enqueues (when possible)
caution

If your theme/builder also injects fonts, you can end up loading fonts twice. After changing settings, verify in DevTools that Google origins are gone and that only the intended local files load.

Manual Self-Hosting (Alternative)​

If you prefer to manage fonts yourself:

  1. Download fonts (and subset if possible).
  2. Host as WOFF2.
  3. Add @font-face and font-display: swap.

Example:

self-hosted-font-face.css
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
}

body {
  font-family: "Inter", system-ui, sans-serif;
}

Preload the font if it is needed above the fold:

preload-self-hosted-font.html
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />

Validation​

In Chrome DevTools:

  • Network -> filter for "Font".
  • Confirm fonts load from your domain/CDN (not fonts.googleapis.com/fonts.gstatic.com).
  • Confirm there are no duplicate font downloads.

In PSI/Lighthouse:

  • "Ensure text remains visible during webfont load" should be resolved.
  • Watch CLS on templates with large headlines/prices (product pages).

Common Mistakes​

MistakeWhy It HurtsFix
Too many families/weightsExtra requests and bytesLimit families and weights; prefer variable fonts
No explicit fallback stackText jumps when fonts swapUse an explicit fallback stack + swap
Preloading fonts not used above the foldWasted bandwidthPreload only what affects first render
Leaving theme/builder font injection onDuplicate loadsDisable one source and re-test

What's Next​