diff --git a/devtools/client/inspector/fonts/fonts.js b/devtools/client/inspector/fonts/fonts.js
index 8813e476f138..0c59451d668b 100644
--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -158,17 +158,34 @@ class FontInspector {
   }
 
   /**
-   * Get all expected CSS font properties and values from the node's computed style.
+   * Get all expected CSS font properties and values from the node's matching rules and
+   * fallback to computed style.
    *
    * @return {Object}
    */
   getFontProperties() {
+    const KEYWORD_VALUES = ["initial", "inherit", "unset", "none"];
     const properties = {};
 
+    // First, get all expected font properties from computed styles.
     for (const prop of FONT_PROPERTIES) {
       properties[prop] = this.nodeComputedStyle[prop].value;
     }
 
+    // Then, replace with enabled font properties found on any of the rules that apply.
+    for (const rule of this.ruleView.rules) {
+      for (const textProp of rule.textProps) {
+        if (FONT_PROPERTIES.includes(textProp.name) &&
+            !KEYWORD_VALUES.includes(textProp.value) &&
+            !textProp.value.includes("calc(") &&
+            !textProp.value.includes("var(") &&
+            !textProp.overridden &&
+            textProp.enabled) {
+          properties[textProp.name] = textProp.value;
+        }
+      }
+    }
+
     return properties;
   }