font-loading-audit
CommunityAudit and optimize web font loading for faster UX.
Authoranouar1991
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Audits font loading behavior: FOIT/FOUT detection via timed screenshots, font-display validation per family, font file sizes and format efficiency (WOFF2 vs WOFF vs TTF), preload link validation, unused font declarations, and subsetting opportunities. Produces a font-by-font report with loading timeline and recommendations.
Core Features & Use Cases
- Inspects every @font-face declaration, checks font-display strategy, measures font file transfer sizes, and captures font loading timelines.
- Validates preload hints for fonts, detects unused font declarations, and flags format inefficiencies to reduce network waste.
- Identifies subsetting opportunities by evaluating character usage and recommends unicode-range-based optimization.
- Use Case: Diagnosing font-related FOIT/FOUT and ensuring efficient, modern font delivery for websites and apps.
Quick Start
Run the font-loading-audit on your target page to generate a comprehensive font-loading report.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: font-loading-audit Download link: https://github.com/anouar1991/binaryPetsClaude/archive/main.zip#font-loading-audit Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.