Storage & Application

Font Inspector

Analyze all loaded typefaces using the document.fonts API to detect render-blocking loads, missing weights, and fallback font rendering issues.

Overview

Understanding Your Typography Loading

Web fonts are one of the most common causes of slow First Contentful Paint (FCP) and Flash of Unstyled Text (FOUT). The Font Inspector uses the browser's native document.fonts API to enumerate every font face loaded in the preview frame, providing visibility into exactly which fonts are active, which are still loading, and which might be blocking the render.

  • Font Enumeration: Lists every font family detected across all frames, including their loaded weights and styles (e.g., Inter 400, Inter 700, Inter 400 italic).
  • Load Status: Each font shows its current status: Loaded (green), Loading (amber), or Error (red — font failed to load).
  • Fallback Detection: Identifies if a fallback system font is currently rendering in place of a custom font due to a load delay or failure.
  • Render-Blocking Flag: Detects font loads configured without font-display: swap which block text rendering until the font resolves — a direct First Contentful Paint killer.
  • Unused Weight Detection: Identifies font weights that were downloaded but may not be in active use, representing unnecessary network overhead.
The Most Critical Fix

Add font-display: swap Everywhere

💡
Always use font-display: swap If the Font Inspector shows render-blocking fonts, add font-display: swap to your @font-face declarations. This tells the browser to show the fallback font immediately and swap in the custom font when it loads, preventing blank text flashes and dramatically improving FCP scores.
💡
Preload your most critical font weight Add a <link rel="preload" as="font"> for your primary font weight (usually the regular 400 weight). The Font Inspector will show this font transitioning from "Loading" to "Loaded" dramatically faster, reducing the FOUT window.
💡
Audit unused font weights Loading Inter 100, 200, 300, 400, 500, 600, 700, 800, and 900 when your design only uses 400 and 700 wastes hundreds of kilobytes. The Font Inspector surfaces every loaded weight so you can trim your font request to exactly what's needed.