Optimize web font loading with subsetting, preloading, font-display strategies, and variable fonts to eliminate FOIT/FOUT and improve performance. [EXPLICIT] Trigger: "font loading", "web fonts", "FOIT", "font-display", "variable fonts"
From jm-adknpx claudepluginhub javimontano/jm-adk-alfaThis skill is limited to using the following tools:
agents/guardian.mdagents/lead.mdagents/specialist.mdagents/support.mdevals/evals.jsonknowledge/body-of-knowledge.mdknowledge/knowledge-graph.mdprompts/meta.mdprompts/primary.mdprompts/variations/deep.mdprompts/variations/quick.mdtemplates/output.docx.mdtemplates/output.htmlSearches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
"Typography is the voice of design — make sure it doesn't stutter on load." — Unknown
Guides web font optimization to eliminate invisible text (FOIT) and layout shifts (FOUT) — covers font-display strategies, preloading critical fonts, Unicode range subsetting, variable fonts for weight reduction, and self-hosting vs CDN tradeoffs. Use when custom fonts are causing performance issues or layout shifts. [EXPLICIT]
swap for body, optional for non-critical)glyphhanger or pyftsubsetfont-display: swap in @font-face declarations<link rel="preload" href="font.woff2" as="font" crossorigin>rel="preload"font-display set appropriately for each font family@import in CSS to load Google Fonts (render-blocking)font-display: block which causes invisible text during loadperformance-testing — measuring font loading impact on Core Web Vitalsbuild-optimization — automating font subsetting in the build pipelineExample invocations:
| Scenario | Handling |
|---|---|
| Empty or minimal input | Request clarification before proceeding |
| Conflicting requirements | Flag conflicts explicitly, propose resolution |
| Out-of-scope request | Redirect to appropriate skill or escalate |