--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -103,25 +103,22 @@ class FontInspector {
       store: this.store,
       title: INSPECTOR_L10N.getStr("inspector.sidebar.fontInspectorTitle"),
     }, fontsApp);
 
     // Expose the provider to let inspector.js use it in setupSidebar.
     this.provider = provider;
 
     this.inspector.selection.on("new-node-front", this.onNewNode);
+    // @see ToolSidebar.onSidebarTabSelected()
+    this.inspector.sidebar.on("fontinspector-selected", this.onNewNode);
     this.ruleView.on("property-value-updated", this.onRuleUpdated);
 
     // Listen for theme changes as the color of the previews depend on the theme
     gDevTools.on("theme-switched", this.onThemeChanged);
-
-    // If a node is already selected, call the handler for node change.
-    if (this.isSelectedNodeValid()) {
-      this.onNewNode();
-    }
   }
 
   /**
    * Given all fonts on the page, and given the fonts used in given node, return all fonts
    * not from the page not used in this node.
    *
    * @param  {Array} allFonts
    *         All fonts used on the entire page
@@ -137,16 +134,17 @@ class FontInspector {
   }
 
   /**
    * Destruction function called when the inspector is destroyed. Removes event listeners
    * and cleans up references.
    */
   destroy() {
     this.inspector.selection.off("new-node-front", this.onNewNode);
+    this.inspector.sidebar.off("fontinspector-selected", this.onNewNode);
     this.ruleView.off("property-value-updated", this.onRuleUpdated);
     gDevTools.off("theme-switched", this.onThemeChanged);
 
     this.document = null;
     this.inspector = null;
     this.nodeComputedStyle = {};
     this.pageStyle = null;
     this.ruleView = null;
@@ -461,17 +459,19 @@ class FontInspector {
     }
   }
 
   /**
    * Handler for "property-value-updated" event emitted from the rule view whenever a
    * property value changes.
    */
   async onRuleUpdated() {
-    await this.refreshFontEditor();
+    if (this.isPanelVisible()) {
+      await this.refreshFontEditor();
+    }
   }
 
   /**
    * Reveal a font's usage in the page.
    *
    * @param  {String} font
    *         The name of the font to be revealed in the page.
    * @param  {Boolean} show
@@ -547,16 +547,21 @@ class FontInspector {
 
     const options = {};
     if (this.pageStyle.supportsFontVariations) {
       options.includeVariations = true;
     }
 
     const node = this.inspector.selection.nodeFront;
     const fonts = await this.getFontsForNode(node, options);
+    if (!fonts.length) {
+      this.store.dispatch(resetFontEditor());
+      return;
+    }
+
     // Get computed styles for the selected node, but filter by CSS font properties.
     this.nodeComputedStyle = await this.pageStyle.getComputed(node, {
       filterProperties: FONT_PROPERTIES
     });
     // Clear any references to writer methods and CSS declarations because the node's
     // styles may have changed since the last font editor refresh.
     this.writers.clear();
     this.textProperties.clear();
@@ -592,40 +597,39 @@ class FontInspector {
   }
 
   async update() {
     // Stop refreshing if the inspector or store is already destroyed.
     if (!this.inspector || !this.store) {
       return;
     }
 
-    let node = this.inspector.selection.nodeFront;
-
     let fonts = [];
     let otherFonts = [];
 
-    let { fontOptions } = this.store.getState();
-    let { previewText } = fontOptions;
-
-    if (!this.isSelectedNodeValid() || !this.isPanelVisible()) {
+    if (!this.isSelectedNodeValid()) {
       this.store.dispatch(updateFonts(fonts, otherFonts));
       return;
     }
 
+    let { fontOptions } = this.store.getState();
+    let { previewText } = fontOptions;
+
     let options = {
       includePreviews: true,
       previewText,
       previewFillStyle: getColor("body-color")
     };
 
     // Add the includeVariations argument into the option to get font variation data.
     if (this.pageStyle.supportsFontVariations) {
       options.includeVariations = true;
     }
 
+    let node = this.inspector.selection.nodeFront;
     fonts = await this.getFontsForNode(node, options);
     otherFonts = await this.getFontsNotInNode(fonts, options);
 
     if (!fonts.length && !otherFonts.length) {
       // No fonts to display. Clear the previously shown fonts.
       if (this.store) {
         this.store.dispatch(updateFonts(fonts, otherFonts));
       }