Monitoring

Font Loading Analysis

Analyse how fonts are loaded on your site and identify performance issues.

Updated 2026-03-17

2 min read

fonts

font-display

preload

Font Loading Analysis#

Custom fonts can significantly impact page load performance. LemWatch analyses your font loading strategy and flags issues.

Total fonts loaded — Count of custom font files

Font sources — Google Fonts, Adobe Fonts, or self-hosted

font-display usage — Whether fonts use font-display: swap to prevent invisible text

Preloaded fonts — Whether critical fonts use <link rel="preload">

Estimated weight — Total download size of all font files in KB

Issue	Impact	Fix
Missing `font-display: swap`	Invisible text during load (FOIT)	Add swap to @font-face
Too many font files	Slow page load	Reduce to 2–3 font files
No preloading	Fonts load late, causing layout shift	Preload critical fonts
Large font files	Increased page weight	Use WOFF2 format, subset fonts

Each font check gets a performance score (0–100):

90–100 — Excellent font loading strategy

70–89 — Minor improvements possible

Below 70 — Font loading is hurting performance

Use WOFF2 — Smallest format, supported by all modern browsers

Limit font families — 2 families maximum (heading + body)

Subset fonts — Only include characters you actually use

Preload critical fonts — Add <link rel="preload" as="font">

Always use font-display: swap — Show fallback text immediately

Was this article helpful?

Image Optimisation Checks

Daily Briefing & Priority Dashboard

Core Web Vitals Explained

Understanding LCP, CLS, INP and how to improve them.

Image Optimisation Checks

Identify oversized, unoptimised, and poorly formatted images on your site.

Setting Performance Budgets

Set thresholds and get alerted when metrics exceed your limits.

Gzip / Brotli compression check

Verifies your server compresses HTML, CSS, JS, and JSON responses — up to 80% payload reduction that costs nothing to enable.