feat(cli): add fonts snippet with alias and detailed terminal output

Adds --snippet fonts as a short alias for the Fonts-Preloaded-Loaded-and-used-above-the-fold snippet.
Reporter now shows loaded fonts table (with font-display warnings for block/auto) and used-above-fold
table, matching the detail level of the browser console output.

Author: nucliweb

cli/src/bin.js

@@ -15,6 +15,9 @@ const SNIPPET_ALIASES = {
   LCP: "CoreWebVitals/LCP",
   CLS: "CoreWebVitals/CLS",
   "LCP-Sub-Parts": "CoreWebVitals/LCP-Sub-Parts",
+  fonts: "Loading/Fonts-Preloaded-Loaded-and-used-above-the-fold",
+  "Fonts-Preloaded-Loaded-and-used-above-the-fold":
+    "Loading/Fonts-Preloaded-Loaded-and-used-above-the-fold",
 };
 
 const USAGE = `webperf-snippets <url> [options]
@@ -36,6 +39,7 @@ Examples:
   npx webperf-snippets https://web.dev
   npx webperf-snippets https://example.com --json
   npx webperf-snippets https://example.com --snippet LCP-Sub-Parts
+  npx webperf-snippets https://example.com --snippet fonts
   npx webperf-snippets https://example.com --budget-lcp 2500
 `;
 

cli/src/reporters/human.js

@@ -29,11 +29,58 @@ function pad(text, len) {
   return text + " ".repeat(Math.max(0, len - visibleLen));
 }
 
+const DISPLAY_WARN = new Set(["block", "auto", "unknown"]);
+
+function renderFontsResult(r) {
+  const d = r.details ?? {};
+  const lines = [];
+
+  lines.push(styleText("bold", `  Fonts — preloaded: ${d.preloadedCount ?? 0}  loaded: ${d.loadedCount ?? 0}  used above fold: ${d.usedAboveFoldCount ?? 0}`));
+
+  if (r.items?.length) {
+    lines.push("");
+    lines.push(styleText("dim", "  Loaded fonts:"));
+    lines.push(styleText("dim", `    ${"Family".padEnd(20)} ${"Weight".padEnd(8)} ${"Style".padEnd(10)} Display`));
+    for (const f of r.items) {
+      const displayWarning = DISPLAY_WARN.has(f.display) ? styleText("yellow", ` ⚠ ${f.display}`) : styleText("green", ` ${f.display}`);
+      lines.push(`    ${f.family.padEnd(20)} ${f.weight.padEnd(8)} ${f.style.padEnd(10)}${displayWarning}`);
+    }
+  }
+
+  if (r.usedFonts?.length) {
+    lines.push("");
+    lines.push(styleText("dim", "  Used above fold:"));
+    lines.push(styleText("dim", `    ${"Family".padEnd(20)} ${"Weight".padEnd(8)} ${"Style".padEnd(10)} Elements`));
+    const sorted = [...r.usedFonts].sort((a, b) => b.elements - a.elements);
+    for (const f of sorted) {
+      lines.push(`    ${f.family.padEnd(20)} ${f.weight.padEnd(8)} ${f.style.padEnd(10)} ${f.elements}`);
+    }
+  }
+
+  if (r.issues?.length) {
+    lines.push("");
+    lines.push(styleText("dim", "  Issues:"));
+    for (const issue of r.issues) {
+      const color = issue.severity === "error" ? "red" : "yellow";
+      lines.push(`    ${styleText(color, issue.severity === "error" ? "✗" : "⚠")} ${issue.message}`);
+    }
+  } else {
+    lines.push("");
+    lines.push(`    ${styleText("green", "✓")} Font loading looks optimized`);
+  }
+
+  return lines.join("\n");
+}
+
 function renderResult(r) {
   if (r.status === "error") {
     return `  ${styleText("red", "✗")} ${pad(r.id, 16)} ${styleText("dim", r.error)}`;
   }
 
+  if (Array.isArray(r.issues)) {
+    return renderFontsResult(r);
+  }
+
   const icon = RATING_ICON[r.rating] ?? "·";
   const valueText = paint(r.rating, formatValue(r.value, r.unit));
   const ratingText = styleText("dim", r.rating ?? "");

cli/tests/unit/reporters.test.js

@@ -64,4 +64,46 @@ describe("reportHuman", () => {
     const output = reportHuman(payload);
     expect(output).toContain("TypeError: x is not defined");
   });
+
+  it("renders fonts snippet result with counts and issues", () => {
+    const payload = {
+      url: "https://example.com",
+      navMs: 500,
+      results: [
+        {
+          id: "Fonts-Preloaded-Loaded-and-used-above-the-fold",
+          status: "ok",
+          count: 2,
+          details: { preloadedCount: 1, loadedCount: 2, usedAboveFoldCount: 2, preloadedNotUsedCount: 1, usedNotPreloadedCount: 0 },
+          items: [],
+          issues: [{ severity: "warning", message: "Preloaded but not used above fold: font.woff2" }],
+        },
+      ],
+      pageErrors: [],
+    };
+    const output = reportHuman(payload);
+    expect(output).toContain("preloaded: 1");
+    expect(output).toContain("loaded: 2");
+    expect(output).toContain("Preloaded but not used above fold: font.woff2");
+  });
+
+  it("renders fonts snippet result with no issues as optimized", () => {
+    const payload = {
+      url: "https://example.com",
+      navMs: 500,
+      results: [
+        {
+          id: "Fonts-Preloaded-Loaded-and-used-above-the-fold",
+          status: "ok",
+          count: 1,
+          details: { preloadedCount: 1, loadedCount: 1, usedAboveFoldCount: 1, preloadedNotUsedCount: 0, usedNotPreloadedCount: 0 },
+          items: [],
+          issues: [],
+        },
+      ],
+      pageErrors: [],
+    };
+    const output = reportHuman(payload);
+    expect(output).toContain("Font loading looks optimized");
+  });
 });

snippets/Loading/Fonts-Preloaded-Loaded-and-used-above-the-fold.js

@@ -307,6 +307,7 @@
       usedNotPreloadedCount: usedNotPreloaded.length,
     },
     items: uniqueLoadedFonts.map(f => ({ family: f.family, weight: f.weight, style: f.style, display: f.display })),
+  usedFonts: usedFonts.map(f => ({ family: f.family, weight: f.weight, style: f.style, elements: f.elements })),
     issues: [
       ...preloadedNotUsed.map(f => ({ severity: "warning", message: `Preloaded but not used above fold: ${f.name}` })),
       ...usedNotPreloaded.map(f => ({ severity: "warning", message: `Used above fold but not preloaded: ${f.family} (${f.weight})` })),