--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -33,21 +33,16 @@ class FontInspector {
 
     this.onNewNode = this.onNewNode.bind(this);
     this.onPreviewFonts = this.onPreviewFonts.bind(this);
     this.onThemeChanged = this.onThemeChanged.bind(this);
 
     this.init();
   }
 
-  componentWillMount() {
-    this.store.dispatch(updatePreviewText(""));
-    this.update(false, "");
-  }
-
   init() {
     if (!this.inspector) {
       return;
     }
 
     let fontsApp = FontsApp({
       onPreviewFonts: this.onPreviewFonts,
     });
@@ -62,16 +57,19 @@ class FontInspector {
     // Expose the provider to let inspector.js use it in setupSidebar.
     this.provider = provider;
 
     this.inspector.selection.on("new-node-front", this.onNewNode);
     this.inspector.sidebar.on("fontinspector-selected", this.onNewNode);
 
     // Listen for theme changes as the color of the previews depend on the theme
     gDevTools.on("theme-switched", this.onThemeChanged);
+
+    this.store.dispatch(updatePreviewText(""));
+    this.update(false, "");
   }
 
   /**
    * 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