font-loading-audit

Community

Audit 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 required

Components

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.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.