Skip to content
Get packs

Web Font Loading Audit

Audits web font loading to fix invisible text and layout shifts, checking real bottlenecks first

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

Once installed, the agent reviews how a website loads its fonts when asked about slow pages, invisible text, or layout shifts. It checks whether font-display: swap is set on @font-face rules and whether critical fonts are preloaded, and it is instructed to confirm the real bottleneck with DevTools, Lighthouse, or field data before suggesting changes. It explains the impact on perceived speed and layout stability in plain terms.

Great for

  • Front-end developers tuning Core Web Vitals on a site that uses custom web fonts
  • Designers or product owners who notice text flickering or jumping during page load
  • Teams running a performance audit who want a checklist-style review of font loading

Skip it if

  • Sites that only use system fonts, since there is little for this skill to fix
  • Anyone expecting automated changes: the skill gives review guidance and recommendations, and it does not run scripts or measure anything itself

Try asking

  • “Audit the font loading on my landing page and tell me if font-display is missing”
  • “Why does my text flash invisible on load? Check my @font-face rules”
  • “Review my site's font preloading and suggest which fonts to preload”
Step-by-step guide: how to use Web Font Loading AuditInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    font-loading.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip font-loading.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip font-loading.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent your actual CSS or HTML and, if possible, a Lighthouse or DevTools report so it can confirm the bottleneck rather than guess
  • Ask for the measurement method behind each recommendation, since the skill asks the agent to describe it
  • Check the linked rule page at frontendchecklist.io for framework-specific code examples, which the agent may need you to supply

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.