How do I install the Font Loading skill?

Run npx skillmds@latest add amey-thakur/font-loading in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Font Loading safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Font Loading?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Font Loading free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Font Loading?

Amey-Thakur (@amey-thakur) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Font Loading by amey-thakur — Agent Skill

Name: Font Loading
Author: Amey-Thakur

Font Loading

Load web fonts without layout shift by subsetting the file, setting font-display, preloading first-paint weights, and matching fallback metrics. Use when custom fonts cause invisible text, a flash of restyle, or a CLS spike.

Amey-Thakur e8902e9 2.5 KB Updated Sep 17, 2026

File contents

Font loading

Web fonts arrive after the HTML and CSS that reference them, so the browser must choose: hide the text until the font loads, or show a fallback and reflow when the real font swaps in. The first flashes invisible text, the second jumps the layout. Load fonts so text is readable immediately and nothing moves when the swap happens.

Method

Set font-display in every @font-face. Use swap to show fallback text at once and swap later, or optional to skip the swap on slow connections. Never leave the default block, which hides text for the whole fetch.
Preload the weights first paint needs. Add <link rel="preload" as="font" type="font/woff2" crossorigin> for the one or two faces above the fold so the fetch starts before the CSS is even parsed.
Subset to the characters you actually use. Strip unused glyphs and scripts with glyphhanger or pyftsubset; a Latin-only subset can be a fraction of the full file. Split by script with unicode-range so only the needed subsets download.
Ship woff2 and nothing else. woff2 is the smallest format and universally supported. Drop woff, ttf, and eot fallbacks unless you must serve ancient browsers: fewer formats mean smaller CSS and one fetch per face.
Match fallback metrics to kill the swap shift. Set size-adjust, ascent-override, and descent-override on a fallback @font-face, or use a tool like Fontaine, so the fallback fills the same space and the swap does not move text.
Self-host instead of a third-party origin. Serving fonts from your own domain removes a cross-origin connection and DNS lookup from the critical path and avoids a render-blocking request to a font CDN.

Signals

Is text visible during the font load rather than blank?
Are first-paint fonts preloaded, so the fetch is not discovered late?
Does the shipped file carry only the glyphs the site uses?
Does the fallback-to-webfont swap leave the layout unmoved?

Boundaries

The layout-shift metric this feeds is web-vitals' CLS; right-sizing images that also shift layout is image-optimization. Variable-font axes and icon fonts carry separate tradeoffs. Delivery caching defers to cdn-strategy.

---name: font-loadingdescription: Load web fonts without layout shift by subsetting the file, setting font-display, preloading first-paint weights, and matching fallback metrics. Use when custom fonts cause invisible text, a flash of restyle, or a CLS spike.---# Font loadingWeb fonts arrive after the HTML and CSS that reference them, so the browser mustchoose: hide the text until the font loads, or show a fallback and reflow whenthe real font swaps in. The first flashes invisible text, the second jumps thelayout. Load fonts so text is readable immediately and nothing moves when theswap happens.## Method1. **Set `font-display` in every `@font-face`.** Use `swap` to show fallback text at once and swap later, or `optional` to skip the swap on slow connections. Never leave the default `block`, which hides text for the whole fetch.2. **Preload the weights first paint needs.** Add `<link rel="preload" as="font" type="font/woff2" crossorigin>` for the one or two faces above the fold so the fetch starts before the CSS is even parsed.3. **Subset to the characters you actually use.** Strip unused glyphs and scripts with `glyphhanger` or `pyftsubset`; a Latin-only subset can be a fraction of the full file. Split by script with `unicode-range` so only the needed subsets download.4. **Ship woff2 and nothing else.** woff2 is the smallest format and universally supported. Drop woff, ttf, and eot fallbacks unless you must serve ancient browsers: fewer formats mean smaller CSS and one fetch per face.5. **Match fallback metrics to kill the swap shift.** Set `size-adjust`, `ascent-override`, and `descent-override` on a fallback `@font-face`, or use a tool like Fontaine, so the fallback fills the same space and the swap does not move text.6. **Self-host instead of a third-party origin.** Serving fonts from your own domain removes a cross-origin connection and DNS lookup from the critical path and avoids a render-blocking request to a font CDN.## Signals- Is text visible during the font load rather than blank?- Are first-paint fonts preloaded, so the fetch is not discovered late?- Does the shipped file carry only the glyphs the site uses?- Does the fallback-to-webfont swap leave the layout unmoved?## BoundariesThe layout-shift metric this feeds is web-vitals' CLS; right-sizing images thatalso shift layout is image-optimization. Variable-font axes and icon fonts carryseparate tradeoffs. Delivery caching defers to cdn-strategy.

Frequently asked questions