FCP — First Contentful Paint

FCP Failures —
Web Font Loading Delays

Your client's brand fonts are delaying the first thing users ever see.

Where to find it: PageSpeed Insights > Diagnostics > Ensure Text Remains Visible During Webfont Load

What It Is

FCP — First Contentful Paint — measures when the browser renders the first piece of content: text, an image, or a canvas element. Web fonts delay FCP because by default, browsers won't display text until the custom font is downloaded and ready. This is called FOIT — Flash of Invisible Text. During FOIT, the page appears blank even though the HTML structure has loaded and the content is technically present. Google's target FCP is under 1.8 seconds. On sites loading multiple custom fonts from external services, FOIT alone can add 500ms–2 seconds to FCP.

Why It Matters

FCP is the metric that determines how quickly users feel the page is responding. A blank page — even for half a second — creates the perception of slowness that influences both user behavior and Google's quality assessment. Google specifically calls out font loading in PageSpeed Insights because it's fixable without changing the visual design. The client keeps their brand fonts; they just load in a way that doesn't block content from appearing. This is one of the cleaner fixes in the CWV toolkit: high impact, low risk, no design changes required.

Root Diagnostics

Common Causes

Understanding why this failure occurs is the first step to fixing it permanently.

No font-display Declaration

Custom @font-face declarations load fonts with the default browser behavior — which is FOIT: invisible text until the font loads. Without font-display: swap or optional, text is hidden during font download.

Google Fonts Loaded Without Preconnect

Google Fonts are loaded via a in the head, but without a preconnect hint to fonts.googleapis.com and fonts.gstatic.com. The browser doesn't start the connection to the font server until it encounters the link element — adding a full network round-trip to font loading time.

Too Many Font Weights Loaded

The site loads 6–8 font weight variations (100, 300, 400, 500, 700, 900) even though the design only uses 2–3. Each additional weight is a separate download that extends the FOIT window.

Fonts Not Self-Hosted or Preloaded

Fonts are loaded from external CDNs (Google Fonts, Adobe Fonts, Typekit) without preload hints. The browser must establish a connection to the external domain and download fonts before text can render.

Interactive Standard Operating Procedure

The Fix Blueprint (Interactive SOP)

Check off each step to monitor your implementation progress live!

Implementation Progress: 0% Completed (0/7)

1. Audit All Font Declarations

Search the site's CSS for all @font-face declarations and tags loading fonts. List every font family, weight, and source. This is your complete font loading inventory — most sites load far more font variations than they use.

2. Add font-display: swap to All @font-face Rules

For every @font-face declaration, add font-display: swap. This tells the browser to display a fallback system font immediately and swap to the custom font when it loads — eliminating FOIT entirely. Text is visible immediately.

3. Add Preconnect Hints for External Font Services

For Google Fonts, add these two lines to the page head: and . This starts the DNS lookup and connection before the browser encounters the font request.

4. Reduce Font Weights to Only What's Used

Audit which font weights are actually used in the CSS. Remove any weights from the font loading declaration that aren't actively applied to elements on the site. Each removed weight reduces download time proportionally.

5. Self-Host Critical Fonts

Download the font files and host them on your own server or CDN. Self-hosted fonts eliminate the external domain connection entirely, allowing preload hints to work at full efficiency and enabling long-term browser caching.

6. Add Preload for Critical Font Files

For the one or two most critical font files (typically regular weight and bold), add a preload hint: <link rel='preload' as='font' href='font.woff2' type='font/woff2' crossorigin>. This tells the browser to download these fonts at high priority during initial page load.

7. Test with font-display: optional for Stable FCP

For sites where font swapping causes visible layout shift (because fallback and custom fonts have different metrics), try font-display: optional instead of swap. This tells the browser to use the custom font only if it loads within a very short window — otherwise use the system font permanently for that page load.

Tools

PageSpeed Insights
Free | 'Ensure text remains visible during webfont load' diagnostic lists every font file and its font-display status
Google Fonts Helper (gwfh.mranftl.com)
Free | Downloads Google Fonts files for self-hosting with optimized @font-face CSS included
FontSquirrel Webfont Generator
Free (fontsquirrel.com/tools/webfont-generator) | Converts font files to WOFF2 format with optimal subsetting for web delivery

Time to Fix

30 minutes

To audit all font loading declarations

1–3 hours

font-display (minutes) | Self-hosting + preload (hours)

Pro Tip

font-display: swap is the fastest win — add it before anything else.

Adding font-display: swap to @font-face declarations takes minutes and eliminates FOIT immediately — text is visible from the first paint even while fonts are still downloading. It's the highest-impact-to-effort fix in font optimization. Do this first, measure the FCP improvement, then evaluate whether self-hosting and preloading are needed to get FCP under 1.8 seconds.

FCP Failures — Web Font Loading Delays