skills.rest
anouar1991
anouar1991COMMUNITY
Explore all skills by this author →
GitHub

font-loading-audit

Audit font loading to detect FOIT/FOUT and optimize font delivery.

1|Updated Jan 9, 2026
Search Tags:#web-performance#preload#font-loading#font-display#font-files#subsetting
One-click install
npx skills add https://github.com/anouar1991/binaryPetsClaude --skill font-loading-audit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: font-loading-audit
Source: https://github.com/anouar1991/binaryPetsClaude/tree/main/plugins/playwright-toolkit/skills/font-loading-audit
Command: npx skills add https://github.com/anouar1991/binaryPetsClaude --skill font-loading-audit

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about font-loading-audit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit web font loading to fix FOIT and FOUT issues?▼

To audit web font loading and fix FOIT/FOUT issues, you can run a targeted audit that captures timed screenshots and inspects @font-face declarations to validate font-display values and loading timelines. This generates a font-by-font report diagnosing the rendering behavior.

What is the best way to validate preload hints and font-display values?▼

Validating preload hints and font-display values involves analyzing @font-face declarations to ensure preload correctness and checking font-display strategies per family. This process detects unused font declarations and flags format inefficiencies to reduce network waste.

How do I identify subsetting opportunities for web font files?▼

Identifying subsetting opportunities for web font files involves evaluating character usage and recommending unicode-range-based optimization. This reduces font file sizes by ensuring only the necessary characters are delivered over the network.

Why does my website experience slow font loading and how can I optimize it?▼

Slow font loading often occurs due to missing preload hints, inefficient font file formats like TTF instead of WOFF2, or unused font declarations. You can optimize font delivery by auditing network transfers, validating preload correctness, and applying subsetting.

Can I use a font loading audit for web app performance reviews?▼

Yes, you can use a font loading audit during web app performance reviews and design QA workflows. It inspects font file transfer sizes, validates preload links, and flags format inefficiencies to ensure modern and efficient font delivery.

Related Skills

Explore More Software Engineering Skills→
jesusalainmmjesusalainmm

fuentes-usadas

Identify and report fonts used across URLs with CSS and @font-face sources.

Community
Intermediate
jacob-balslevjacob-balslev
1

typography-system

Define typefaces, modular scales, and WOFF2 variable font delivery.

Community
Advanced
HsienWHsienW
63

performance-optimization

Analyze web application performance bottlenecks using Lighthouse and web-vitals metrics.

Community
Advanced
berkcangumusisikberkcangumusisik
11

lighthouse-fix

Analyze React/TypeScript code and assets to fix Lighthouse performance issues.

Community
Intermediate