Seoxpert.io
Get started
mediumBest Practices

External Web Fonts Loaded Without Preconnect or Preload

External web fonts are loaded without preconnect or preload, causing render delays and flashes of unstyled or invisible text.

By Seoxpert Editorial · Published

Why it matters

When external fonts are loaded without preconnect or preload, browsers must establish network connections and fetch font files on the critical rendering path. This delays text rendering, leading to flashes of unstyled (FOUT) or invisible text (FOIT), which negatively impacts user experience and Core Web Vitals like CLS.

Impact

Leaving this unresolved can slow page rendering and degrade both SEO rankings and user experience.

How it's detected

Automated crawlers check for external font stylesheets and verify if preconnect or preload hints are present in the page's <head>.

Common causes

  • •Font stylesheets are included without preconnect or preload tags.
  • •Developers are unaware of the performance impact of external font loading.
  • •Fonts are loaded from third-party providers (e.g., Google Fonts) without optimization.
  • •Site templates or CMS themes omit preconnect/preload by default.

How to fix it

Add <link rel='preconnect' href='https://fonts.googleapis.com'> and <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin> in the <head> before the font stylesheet. For self-hosted fonts, use <link rel='preload' as='font' crossorigin> to preload the font file. These hints help browsers fetch fonts earlier, reducing render delays.

Code examples

Problem: External font without preconnect/preload

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

Fix: Add preconnect for Google Fonts

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

Fix: Preload for self-hosted font

<link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin>

FAQ

Why do I need both preconnect and preload for external fonts?

Preconnect establishes early connections to font servers, while preload tells the browser to fetch font files sooner. Both reduce render delays.

Will adding preconnect or preload improve my Core Web Vitals?

Yes, these hints can reduce layout shifts and speed up text rendering, positively impacting metrics like CLS and LCP.

Do I need to use crossorigin with preconnect or preload?

Yes, for most external font providers like Google Fonts, you should use crossorigin to ensure fonts load correctly and are cacheable.

Is preconnect needed if I self-host my fonts?

No, preconnect is mainly for external domains. For self-hosted fonts, use preload instead.

Found this issue on your site?

Run a scan to see if External Web Fonts Loaded Without Preconnect or Preload affects your pages.

Scan my website →