diff --git a/packages/lint/src/rules/fonts.test.ts b/packages/lint/src/rules/fonts.test.ts
index 6afa663bbe2..fdbabb76696 100644
--- a/packages/lint/src/rules/fonts.test.ts
+++ b/packages/lint/src/rules/fonts.test.ts
@@ -14,6 +14,33 @@ async function findAliasFindings(html: string) {
 
 describe("font rules", () => {
   describe("system_font_will_alias", () => {
+    it("reports an aliased family reached through a referenced custom property", async () => {
+      const findings = await findAliasFindings(`<div data-composition-id="test"><style>
+        :root { --heading: "Verdana"; } h1 { font-family: var(--heading); }
+      </style></div>`);
+      expect(findings).toHaveLength(1);
+      expect(findings[0]?.message).toContain("'verdana' → Inter");
+    });
+
+    it.each([
+      ':root { --font-family: "Verdana"; }',
+      'p::before { content: "font-family: Verdana;"; }',
+    ])("ignores aliased names outside font declarations: %s", async (css) => {
+      const findings = await findAliasFindings(`<div data-composition-id="test"><style>
+        ${css} p { font-family: Inter; }
+      </style></div>`);
+      expect(findings).toHaveLength(0);
+    });
+
+    it("does not treat quoted @font-face text as an alias declaration", async () => {
+      const findings = await findAliasFindings(`<div data-composition-id="test"><style>
+        p::before { content: "@font-face { font-family: Verdana; }"; }
+        p { font-family: Verdana; }
+      </style></div>`);
+      expect(findings).toHaveLength(1);
+      expect(findings[0]!.message).toContain("'verdana' → Inter");
+    });
+
     it("flags SF Mono as aliased to JetBrains Mono", async () => {
       const html = `<div data-composition-id="test" data-width="1920" data-height="1080">
         <style>code { font-family: 'SF Mono', monospace; }</style>
@@ -99,6 +126,99 @@ describe("font rules", () => {
   });
 
   describe("font_family_without_font_face", () => {
+    it.each([
+      ':root { --font-family: "Brand Heading"; } h1 { font-family: var(--font-family); }',
+      ':root { --family: "Brand Heading"; --heading: var(--family); } h1 { font-family: var(--heading); }',
+      ':root { --heading: "Brand Heading"; } h1 { font-family: serif, var(--heading), sans-serif; }',
+      ':root { --heading: "Brand Heading", sans-serif; } h1 { font-family: var(--heading); }',
+      ':root { --Heading: "Brand Heading"; --heading: Inter; } h1 { font-family: var(--Heading); }',
+      ':root { --heading: "Brand Heading"; } h1 { font-family: var(--heading, "Unused Fallback"); }',
+    ])("reports the missing family in a referenced custom property: %s", async (css) => {
+      const findings = await findByCode(
+        `<div data-composition-id="test"><style>${css}</style></div>`,
+        "font_family_without_font_face",
+      );
+      expect(findings).toHaveLength(1);
+      expect(findings[0]?.message).toContain("brand heading");
+      expect(findings[0]?.message).not.toContain("unused fallback");
+    });
+
+    it("resolves referenced font tokens across style blocks and locates their use", async () => {
+      const findings = await findByCode(
+        `<div data-composition-id="test"><style>:root { --font-family: "Brand Heading"; }</style>
+<style>
+h1 { font-family: var(--font-family); }
+</style></div>`,
+        "font_family_without_font_face",
+      );
+      expect(findings).toHaveLength(1);
+      expect(findings[0]).toMatchObject({ line: 3, column: 6 });
+    });
+
+    it.each([
+      '@font-face { font-family: "Brand Heading"; src: local("Arial"); } :root { --heading: "Brand Heading"; } h1 { font-family: var(--heading); }',
+      ":root { --heading: var(--other); --other: var(--heading); } h1 { font-family: var(--heading); }",
+      ':root { --heading: "Brand Heading"; } h1 { font-family: var(--unresolved); }',
+      ':root { --heading: "Brand Heading"; } h1 { font-family: "var(--heading)"; }',
+    ])("keeps declared or unresolved token references quiet: %s", async (css) => {
+      const findings = await findByCode(
+        `<div data-composition-id="test"><style>${css}</style></div>`,
+        "font_family_without_font_face",
+      );
+      expect(findings).toHaveLength(0);
+    });
+
+    it.each([
+      ':root { --font-family: "Brand Heading"; }',
+      ':root { --brand-font-family: "Brand Heading"; }',
+      'p::before { content: "font-family: Brand Heading;"; }',
+    ])("ignores family names outside font declarations: %s", async (css) => {
+      const findings = await findByCode(
+        `<div data-composition-id="test"><style>${css} p { font-family: Inter; }</style></div>`,
+        "font_family_without_font_face",
+      );
+      expect(findings).toHaveLength(0);
+    });
+
+    it.each([
+      'p::before { content: "@font-face { font-family: Brand Heading; }"; }',
+      '@font-face { --font-family: "Brand Heading"; src: local("Arial"); }',
+    ])("requires a real font-face descriptor: %s", async (css) => {
+      const findings = await findByCode(
+        `<div data-composition-id="test"><style>${css} p { font-family: "Brand Heading"; }</style></div>`,
+        "font_family_without_font_face",
+      );
+      expect(findings).toHaveLength(1);
+      expect(findings[0]!.message).toContain("brand heading");
+    });
+
+    it("reports only the real missing family and locates its declaration", async () => {
+      const findings = await findByCode(
+        `<div data-composition-id="test"><style>
+:root { --font-family: "Unused Brand"; }
+p::before { content: "font-family: Another Brand;"; }
+p { FONT-FAMILY: "Real Brand", sans-serif !important; }
+</style></div>`,
+        "font_family_without_font_face",
+      );
+      expect(findings).toHaveLength(1);
+      expect(findings[0]).toMatchObject({ line: 4, column: 5 });
+      expect(findings[0]!.message).toContain("real brand");
+      expect(findings[0]!.message).not.toContain("unused brand");
+      expect(findings[0]!.message).not.toContain("another brand");
+    });
+
+    it("still finds a real font face inside a conditional rule", async () => {
+      const findings = await findByCode(
+        `<div data-composition-id="test"><style>
+        @media screen { @font-face { font-family: "Brand Heading"; src: local("Arial"); } }
+        p { font-family: "Brand Heading"; }
+      </style></div>`,
+        "font_family_without_font_face",
+      );
+      expect(findings).toHaveLength(0);
+    });
+
     it("flags font-family used without @font-face", async () => {
       const html = `<div data-composition-id="test" data-width="1920" data-height="1080">
         <style>body { font-family: 'GT Walsheim', sans-serif; }</style>
diff --git a/packages/lint/src/rules/fonts.ts b/packages/lint/src/rules/fonts.ts
index cb9bb7df59a..f8fdd74d786 100644
--- a/packages/lint/src/rules/fonts.ts
+++ b/packages/lint/src/rules/fonts.ts
@@ -30,40 +30,36 @@ const GENERIC_FAMILIES = new Set([
   "revert",
 ]);
 
-// A CSS comment can contain a `}` (e.g. `@font-face { /* 400 } regular */
-// font-family: 'X'; ... }`), which truncates the naive `@font-face\s*\{[^}]*\}`
-// block match at the comment's brace — so the rule never sees the real
-// `font-family` and reports a false-positive font_family_without_font_face.
-// Large/"framework" stylesheets hit this far more often than minimal ones,
-// which is why a simple <style> passes while a complex one fails. Strip
-// comments before scanning so a brace inside one cannot split a block. See #1534.
-function stripCssComments(css: string): string {
-  return css.replace(/\/\*[\s\S]*?\*\//g, " ");
+function parseFontCss(css: string): postcss.Root | null {
+  try {
+    return postcss.parse(css);
+  } catch {
+    return null;
+  }
+}
+
+function isFontFaceDeclaration(decl: postcss.Declaration): boolean {
+  let parent: postcss.AnyNode | undefined = decl.parent;
+  while (parent) {
+    if (parent.type === "atrule" && parent.name.toLowerCase() === "font-face") return true;
+    parent = parent.parent;
+  }
+  return false;
 }
 
 function extractFontFaceFamilies(styles: Array<{ content: string }>): Set<string> {
   const families = new Set<string>();
-  const fontFaceRe = /@font-face\s*\{[^}]*\}/gi;
-  const familyRe = /font-family\s*:\s*(['"]?)([^;'"]+)\1/i;
   for (const style of styles) {
-    const content = stripCssComments(style.content);
-    let match: RegExpExecArray | null;
-    while ((match = fontFaceRe.exec(content)) !== null) {
-      const familyMatch = match[0].match(familyRe);
-      if (familyMatch?.[2]) {
-        families.add(familyMatch[2].trim().toLowerCase());
-      }
-    }
+    parseFontCss(style.content)?.walkDecls(/^font-family$/i, (decl) => {
+      if (!isFontFaceDeclaration(decl)) return;
+      const name = normalizeUsedFontName(decl.value);
+      if (name) families.add(name);
+    });
   }
   return families;
 }
 
-// Normalize one comma-separated font-family entry to a lowercase family name,
-// or null if it carries no resolvable name. `var(--heading)` (or any function
-// token) is an indirection the linter cannot statically resolve, so the literal
-// `var(...)` is not a font name and flagging it is a false positive. Comma-split
-// fallbacks like `var(--x, 'Inter')` also leave a dangling `)` on the fallback
-// part, so skip anything bearing parentheses.
+// Function tokens and unresolved var() references are not literal family names.
 function normalizeUsedFontName(part: string): string | null {
   const name = part
     .trim()
@@ -75,22 +71,49 @@ function normalizeUsedFontName(part: string): string | null {
   return name;
 }
 
+function collectFontCustomProperties(styles: Array<{ content: string }>): Map<string, string> {
+  const properties = new Map<string, string>();
+  for (const style of styles) {
+    parseFontCss(style.content)?.walkDecls(/^--/, (decl) => {
+      if (!isFontFaceDeclaration(decl)) properties.set(decl.prop, decl.value);
+    });
+  }
+  return properties;
+}
+
+function resolveUsedFontNames(
+  value: string,
+  properties: ReadonlyMap<string, string>,
+  resolving: ReadonlySet<string> = new Set(),
+): string[] {
+  return postcss.list.comma(value).flatMap((part) => {
+    const variable = /^var\(\s*(--[^\s,()]+)\s*(?:,[\s\S]*)?\)$/i.exec(part.trim());
+    if (!variable) {
+      const name = normalizeUsedFontName(part);
+      return name ? [name] : [];
+    }
+    const property = variable[1];
+    if (!property || resolving.has(property) || resolving.size >= 8) return [];
+    const referenced = properties.get(property);
+    if (referenced === undefined) return [];
+    return resolveUsedFontNames(referenced, properties, new Set(resolving).add(property));
+  });
+}
+
 function extractUsedFontFamilies(styles: Array<{ content: string }>): string[] {
   const used: string[] = [];
   const seen = new Set<string>();
-  const propRe = /font-family\s*:\s*([^;}{]+)/gi;
+  const properties = collectFontCustomProperties(styles);
   for (const style of styles) {
-    const withoutFontFace = stripCssComments(style.content).replace(/@font-face\s*\{[^}]*\}/gi, "");
-    let match: RegExpExecArray | null;
-    while ((match = propRe.exec(withoutFontFace)) !== null) {
-      for (const part of match[1]!.split(",")) {
-        const name = normalizeUsedFontName(part);
-        if (name && !GENERIC_FAMILIES.has(name) && !seen.has(name)) {
+    parseFontCss(style.content)?.walkDecls(/^font-family$/i, (decl) => {
+      if (isFontFaceDeclaration(decl)) return;
+      for (const name of resolveUsedFontNames(decl.value, properties)) {
+        if (!GENERIC_FAMILIES.has(name) && !seen.has(name)) {
           seen.add(name);
           used.push(name);
         }
       }
-    }
+    });
   }
   return used;
 }
@@ -230,19 +253,12 @@ function uniqueFontLocation(
   locate: LintContext["locate"],
 ): SourceLocation {
   const locations: SourceLocation[] = [];
+  const properties = collectFontCustomProperties(styles);
   for (const style of styles) {
     try {
       postcss.parse(style.content).walkDecls(/^font-family$/i, (decl) => {
-        let parent: postcss.AnyNode | undefined = decl.parent;
-        while (parent) {
-          if (parent.type === "atrule" && parent.name.toLowerCase() === "font-face") return;
-          parent = parent.parent;
-        }
-        if (
-          !decl.value
-            .split(",")
-            .some((part) => families.includes(normalizeUsedFontName(part) ?? ""))
-        )
+        if (isFontFaceDeclaration(decl)) return;
+        if (!resolveUsedFontNames(decl.value, properties).some((name) => families.includes(name)))
           return;
         locations.push(locate(style, decl.source?.start?.offset));
       });
@@ -251,5 +267,5 @@ function uniqueFontLocation(
       return {};
     }
   }
-  return locations.length === 1 ? locations[0]! : {};
+  return locations.length === 1 ? (locations[0] ?? {}) : {};
 }