Typography Tools

Audit fonts, spot unused requests, and get quick fixes

Typography Audit

Summary

–

Font families detected

–

Font files requested

–

Unused requests

–

Missing weights/styles

Loading Strategy (do these first)

Implementation Guide (paste safely)

HTML <head>: paste “Preconnect & Preload” at the top of your head, before other CSS/JS.
Global CSS: paste “@font-face” into a stylesheet that loads on all pages.
Base styles: paste “Fallback stacks” into a global rule (e.g., html, body).

Fonts are hosted on another origin. Keep crossorigin on preloads and ensure the font host sends proper CORS headers.

Preconnect & Preload (HTML head)

<!-- will appear after audit -->

@font-face (Global CSS)

// waiting for audit…

Fallback stacks (CSS)

// waiting for audit…

FOIT/FOUT & Basic Risk Signals

Warnings

Notes

Families & Usage

Family	Styles/Weights Found	Fallback Stack	Occurrences	Sources

Requested but Not Used (highlighted)

              // We found font files that are loaded but not applied to any rendered text. Remove, load on-demand, or scope to pages that need them.
            

File	Family	Weight/Style	Bytes	Where from

Missing Weights/Styles