Guide · Agent skill
How to use the Web Font Loading Audit agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The font-loading skill is a set of instructions that teaches an AI agent to review how a website loads its custom web fonts. It is aimed at front-end developers, designers and performance teams who see slow pages, invisible text or layout shifts. After reading this guide you will know how to install the skill, how to ask for a review in plain language, and what the agent will and will not do.
Web Font Loading Auditthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the font-loading skill ZIP from the font-loading page on this directory.
- 2Unzip the folder. Extract it so you have a folder containing SKILL.md and references/rule.md.
- 3Place it where your agent looks. Move the folder to ~/.claude/skills/ for personal use or to a project's .claude/skills/ folder.
- 4Or upload it in the Claude apps. Under Settings → Capabilities → Skills, upload the ZIP.
- 5Describe the problem. Ask about slow loading, invisible text or layout shifts in plain words.
- 6Ask for verification. Request that the agent confirm the bottleneck with DevTools, Lighthouse or field data first.
- 7Apply and re-measure. Make the suggested changes yourself, then measure again to confirm the improvement.
What is an agent skill and what does font-loading make the agent do?
An agent skill is a folder with a SKILL.md file that tells an AI agent when to use it and how to work on a task. The font-loading skill covers the topic of optimizing web font loading, which the source describes as preventing layout shifts and invisible text.
Once installed, the agent reviews how a site loads its fonts when you ask 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. It is instructed to confirm the real bottleneck with DevTools, Lighthouse or field data before suggesting changes, and it explains the effect on perceived speed and layout stability in plain terms.
- Checks that font-display is used on @font-face declarations
- Checks whether the most important fonts are preloaded with rel="preload"
- Points to WOFF2 as a modern format for better compression
- Explains how font loading affects perceived performance and layout stability
How do you install the font-loading skill?
Download the ZIP for the skill from the font-loading page on this directory, then unzip it. The skill folder contains references/rule.md and SKILL.md.
You can put the unzipped folder in your personal skills directory at ~/.claude/skills/, or in a project's .claude/skills/ folder if you want it to apply only to that project.
Alternatively, if you use the Claude apps, upload the ZIP under Settings → Capabilities → Skills.
- Personal install: place the folder in ~/.claude/skills/
- Project install: place the folder in the project's .claude/skills/
- Claude apps: upload the ZIP under Settings → Capabilities → Skills
How do you trigger the skill with a natural request?
You do not need a special command. Describe the problem in ordinary words that match the skill's description: slow page loads, heavy assets, rendering delays, or text that flickers or jumps while the page loads. Mention the site and, if you have them, the files that define your fonts.
Ask the agent to verify the bottleneck before changing anything. The skill is built to do this, but saying it explicitly keeps the answer focused.
- "My headings flash in late on the homepage. Audit the font loading and tell me what to change."
- "Our text jumps when the page loads. Review our @font-face rules and preloads."
- "Check whether our custom fonts use font-display: swap and whether the main font is preloaded."
- "Before recommending anything, confirm the font bottleneck with DevTools or Lighthouse."
What does a typical review look like?
The skill's fix guidance is to add font-display: swap to @font-face declarations and to use a link rel="preload" for the most important fonts. The reference page shows the preload tag with as="font", type="font/woff2" and crossorigin attributes.
Expect the agent to flag specific files and requests that affect font loading, and to describe how the issue was measured. Treat its suggestions as a checklist to verify in your own browser tools, not as proof.
- Flags @font-face rules missing font-display: swap
- Flags critical fonts that are not preloaded
- Notes fonts referenced late from CSS files
- Suggests WOFF2 files where appropriate
<link
rel="preload"
href="/fonts/my-font.woff2"
as="font"
type="font/woff2"
crossorigin
>What do you need before you start, and what are the safety notes?
The skill lists no required tools. It does not run scripts and does not use the network, so it cannot measure your site itself. Any measurement has to come from you, using DevTools, Lighthouse or field data, and you then share the results with the agent.
Because the skill only gives review guidance, nothing changes on your site unless you or your team make the edits. Review any suggested code before deploying it.
- Requirements: none listed by the source
- Runs scripts: no
- Uses network: no
- You supply the measurements from DevTools, Lighthouse or field data
What tips help you get better results?
Give the agent the real CSS for your @font-face rules and the head of the page that contains your preload tags. Without them, the review can only be general.
Sites that use only system fonts have little for this skill to fix, so it is not useful there.
- Paste your @font-face blocks and the relevant <head> markup
- Share a Lighthouse or DevTools finding so the agent can check the real bottleneck
- Preload only the most important fonts, since the source frames preloading as a way to discover critical fonts earlier
- Ask for the reasoning behind each recommendation so you can check it
What people use it for
- Finding @font-face rules that lack font-display: swap on a marketing site
- Checking whether the main brand font is preloaded in the page head
- Investigating text that flickers or jumps during page load for a designer or product owner
- Reviewing font loading as part of a team's checklist-style performance audit
Frequently asked questions
How do I install the font-loading agent skill?
Download the ZIP from the font-loading page, then unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder. In the Claude apps you can instead upload the ZIP under Settings → Capabilities → Skills.
Does the font-loading skill need anything else installed?
The source lists no requirements. The skill does not run scripts and does not use the network, so it provides guidance only and you supply any measurements yourself.
Is the font-loading skill free?
The skill is published under the MIT licence, as stated on this page. The source does not mention pricing.
Will the skill change my fonts automatically?
No. It gives review guidance and recommendations, such as adding font-display: swap and preloading critical fonts. You or your team make any changes.
Why does the agent not just guess the fix?
The skill is instructed to verify the real bottleneck in DevTools, Lighthouse or field data before recommending changes, so suggestions are tied to evidence.
What should I use instead if my site only uses system fonts?
The source says this skill has little to fix on sites that use only system fonts. Use a general performance review for other issues such as heavy assets or rendering delays.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you build or tune a site with custom web fonts and want a checklist-style review of font-display and preloading, with measurements you run yourself. Skip it if your site uses only system fonts or if you expect the agent to run tests or make changes on its own.
Download the skill