Preload critical fonts

Severity: Recommended

Fonts used above-the-fold should be preloaded to avoid Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT). Late font discovery delays First Contentful Paint.

Check automatically:

1. Check HTML for font preload tags:

# Look for preload links for fonts
curl -sL https://example.com | grep -iE '<link[^>]*rel="preload"[^>]*(font|\.woff)'

# Or check for as="font" attribute
curl -sL https://example.com | grep -iE '<link[^>]*as="font"'

2. Check response headers for Link preload:

# Some sites use HTTP headers instead of HTML tags
curl -sI https://example.com | grep -i "link:.*preload.*font"

3. List all fonts loaded (to compare against preloads):

# Find font URLs referenced in CSS/HTML
curl -sL https://example.com | grep -oE 'url\([^)]*\.(woff2?|ttf|otf)[^)]*\)' | head -5

# Or check the CSS files
curl -sL https://example.com | grep -oE 'href="[^"]*\.css"' | head -3

4. Check for font-display property (alternative to preload):

# font-display: swap prevents FOIT
curl -sL https://example.com | grep -i "font-display"

5. Verify preload has required attributes:

# Preload must have crossorigin for fonts
curl -sL https://example.com | grep -iE '<link[^>]*preload[^>]*font' | grep -i "crossorigin"

Ask user:

• If no preloads found: "Are custom fonts used above-the-fold?"
• If using system fonts only: N/A (no preload needed)

Pass criteria:

• Primary fonts (above-the-fold) have preload tags, OR
• font-display: swap or optional is used, OR
• Only system fonts used (no custom fonts)
• Preload uses correct attributes: as="font", crossorigin, type="font/woff2"

Fail criteria:

• Custom fonts used without preload AND without font-display fallback
• Missing crossorigin attribute on font preloads (breaks preload)
• Using heavy font formats (ttf/otf) instead of woff2

Evidence to capture:

• Preload tags found (or absence)
• Font formats in use (woff2 preferred)
• font-display value if set
• Number of font files loaded

---