--- a/devtools/client/inspector/fonts/components/FontEditor.js
+++ b/devtools/client/inspector/fonts/components/FontEditor.js
@@ -84,33 +84,43 @@ class FontEditor extends PureComponent {
    *
    * @param {Array} fonts
    *        Fonts used on selected node.
    * @param {Function} onToggleFontHighlight
    *        Callback to trigger in-context highlighting of text that uses a font.
    * @return {DOMNode}
    */
   renderFontFamily(fonts, onToggleFontHighlight) {
+    const fontList = dom.ul(
+      {
+        className: "fonts-list"
+      },
+      fonts.map(font => {
+        return dom.li(
+          {},
+          FontMeta({ font, onToggleFontHighlight })
+        );
+      })
+    );
+
     return dom.label(
       {
         className: "font-control font-control-family",
       },
       dom.span(
         {
           className: "font-control-label",
         },
         getStr("fontinspector.fontFamilyLabel")
       ),
       dom.div(
         {
           className: "font-control-box",
         },
-        fonts.map(font => {
-          return FontMeta({ font, onToggleFontHighlight });
-        })
+        fontList
       )
     );
   }
 
   renderFontSize(value) {
     return FontSize({
       onChange: this.props.onPropertyChange,
       value,
@@ -201,17 +211,19 @@ class FontEditor extends PureComponent {
     const hasSlantOrItalicAxis = hasFontAxes && font.variationAxes.find(axis => {
       return axis.tag === "slnt" || axis.tag === "ital";
     });
     const hasWeightAxis = hasFontAxes && font.variationAxes.find(axis => {
       return axis.tag === "wght";
     });
 
     return dom.div(
-      {},
+      {
+        id: "font-editor"
+      },
       // Always render UI for font family, format and font file URL.
       this.renderFontFamily(fonts, onToggleFontHighlight),
       // Render UI for font variation instances if they are defined.
       hasFontInstances && this.renderInstances(font.variationInstances, instance),
       // Always render UI for font size.
       this.renderFontSize(properties["font-size"]),
       // Render UI for font weight if no "wght" registered axis is defined.
       !hasWeightAxis && this.renderFontWeight(properties["font-weight"]),

--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -677,16 +677,17 @@ class FontInspector {
     const families = this.groupFontFamilies(fontsUsed, familiesDeclared);
     // Assign writer methods to each axis defined in font-variation-settings.
     const axes = parseFontVariationAxes(properties["font-variation-settings"]);
     Object.keys(axes).map(axis => {
       this.writers.set(axis, this.getWriterForAxis(axis));
     });
 
     this.store.dispatch(updateFontEditor(fontsUsed, families, properties));
+    this.inspector.emit("fonteditor-updated");
   }
 
   /**
    * Capture the state of all variation axes. Allows the user to return to this state with
    * the "Custom" instance after they've selected a font-defined named variation instance.
    * This method is debounced. See constructor.
    */
   snapshotChanges() {