--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -31,44 +31,40 @@ function FontInspector(inspector, window
   this.store = inspector.store;
 
   this.update = this.update.bind(this);
 
   this.onNewNode = this.onNewNode.bind(this);
   this.onPreviewFonts = this.onPreviewFonts.bind(this);
   this.onShowAllFont = this.onShowAllFont.bind(this);
   this.onThemeChanged = this.onThemeChanged.bind(this);
+
+  this.init();
 }
 
 FontInspector.prototype = {
   init() {
     if (!this.inspector) {
       return;
     }
 
     let app = App({
       onPreviewFonts: this.onPreviewFonts,
       onShowAllFont: this.onShowAllFont,
     });
 
     let provider = createElement(Provider, {
+      id: "fontinspector",
+      key: "fontinspector",
       store: this.store,
-      id: "fontinspector",
       title: INSPECTOR_L10N.getStr("inspector.sidebar.fontInspectorTitle"),
-      key: "fontinspector",
     }, app);
 
-    let defaultTab = Services.prefs.getCharPref("devtools.inspector.activeSidebar");
-
-    this.inspector.addSidebarTab(
-      "fontinspector",
-      INSPECTOR_L10N.getStr("inspector.sidebar.fontInspectorTitle"),
-      provider,
-      defaultTab == "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(""));

--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -663,23 +663,37 @@ Inspector.prototype = {
     if (this.target.form.animationsActor) {
       this.sidebar.addFrameTab(
         "animationinspector",
         INSPECTOR_L10N.getStr("inspector.sidebar.animationInspectorTitle"),
         "chrome://devtools/content/animationinspector/animation-inspector.xhtml",
         defaultTab == "animationinspector");
     }
 
-    if (Services.prefs.getBoolPref("devtools.fontinspector.enabled") &&
-        this.canGetUsedFontFaces) {
-      const FontInspector = this.browserRequire("devtools/client/inspector/fonts/fonts");
-      this.fontinspector = new FontInspector(this, this.panelWin);
-      this.fontinspector.init();
-
-      this.sidebar.toggleTab(true, "fontinspector");
+    if (this.canGetUsedFontFaces) {
+      let fontId = "fontinspector";
+      let fontTitle = INSPECTOR_L10N.getStr("inspector.sidebar.fontInspectorTitle");
+      this.sidebar.addTab(
+        fontId,
+        fontTitle,
+        {
+          props: {
+            id: fontId,
+            title: fontTitle
+          },
+          panel: () => {
+            if (!this.fontinspector) {
+              const FontInspector =
+                this.browserRequire("devtools/client/inspector/fonts/fonts");
+              this.fontinspector = new FontInspector(this, this.panelWin);
+            }
+            return this.fontinspector.provider;
+          }
+        },
+        defaultTab == fontId);
     }
 
     // Persist splitter state in preferences.
     this.sidebar.on("show", this.onSidebarShown);
     this.sidebar.on("hide", this.onSidebarHidden);
     this.sidebar.on("destroy", this.onSidebarHidden);
 
     this.sidebar.show(defaultTab);