--- a/devtools/client/shared/output-parser.js
+++ b/devtools/client/shared/output-parser.js
@@ -456,16 +456,20 @@ OutputParser.prototype = {
 
             if (parenDepth === 0) {
               outerMostFunctionTakesColor = false;
             }
           } else if (token.text === "," &&
                      options.expectFont && fontFamilyNameParts.length !== 0) {
             this._appendFontFamily(fontFamilyNameParts.join(""), options);
             fontFamilyNameParts = [];
+            this._appendNode("span", {
+              class: "ruleview-font-family-separator"
+            }, token.text);
+            break;
           }
           // falls through
         default:
           this._appendTextNode(
             text.substring(token.startOffset, token.endOffset));
           break;
       }
 
@@ -1388,26 +1392,30 @@ OutputParser.prototype = {
       trailingWhitespace = true;
     }
 
     if (spanContents[0] === "'" || spanContents[0] === "\"") {
       quoteChar = spanContents[0];
     }
 
     if (quoteChar) {
-      this._appendTextNode(quoteChar);
+      this._appendNode("span", {
+        class: "ruleview-font-family-separator"
+      }, quoteChar);
       spanContents = spanContents.slice(1, -1);
     }
 
     this._appendNode("span", {
       class: options.fontFamilyClass
     }, spanContents);
 
     if (quoteChar) {
-      this._appendTextNode(quoteChar);
+      this._appendNode("span", {
+        class: "ruleview-font-family-separator"
+      }, quoteChar);
     }
 
     if (trailingWhitespace) {
       this._appendTextNode(" ");
     }
   },
 
   /**

--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -536,20 +536,16 @@
 .ruleview-overridden {
   text-decoration: line-through;
 }
 
 .theme-light .ruleview-overridden {
   text-decoration-color: var(--theme-content-color3);
 }
 
-.ruleview-font-family.used-font {
-  text-decoration: underline;
-}
-
 .styleinspector-propertyeditor {
   border: 1px solid #CCC;
   padding: 0;
   margin: -1px -3px -1px -1px;
 }
 
 .theme-firebug .styleinspector-propertyeditor {
   border: 1px solid var(--theme-splitter-color);
@@ -586,20 +582,26 @@
 
 .ruleview-selectorcontainer {
   word-wrap: break-word;
   cursor: text;
 }
 
 .ruleview-selector-separator,
 .ruleview-selector-unmatched,
-.ruleview-unmatched-variable {
+.ruleview-unmatched-variable,
+.ruleview-font-family,
+.ruleview-font-family-separator {
   color: #888;
 }
 
+.ruleview-font-family.used-font {
+  color: unset;
+}
+
 .ruleview-selector-matched > .ruleview-selector-attribute {
   /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
 }
 
 .ruleview-selector-matched > .ruleview-selector-pseudo-class {
   /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
 }