--- a/devtools/client/inspector/fonts/components/FontOverview.js
+++ b/devtools/client/inspector/fonts/components/FontOverview.js
@@ -2,23 +2,26 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const Services = require("Services");
 
 const Accordion = createFactory(require("devtools/client/inspector/layout/components/Accordion"));
 const FontList = createFactory(require("./FontList"));
 
 const { getStr } = require("../utils/l10n");
 const Types = require("../types");
 
+const PREF_FONT_EDITOR = "devtools.inspector.fonteditor.enabled";
+
 class FontOverview extends PureComponent {
   static get propTypes() {
     return {
       fontData: PropTypes.shape(Types.fontData).isRequired,
       fontOptions: PropTypes.shape(Types.fontOptions).isRequired,
       onPreviewFonts: PropTypes.func.isRequired,
       onToggleFontHighlight: PropTypes.func.isRequired,
     };
@@ -27,16 +30,22 @@ class FontOverview extends PureComponent
   constructor(props) {
     super(props);
     this.onToggleFontHighlightGlobal = (font, show) => {
       this.props.onToggleFontHighlight(font, show, false);
     };
   }
 
   renderElementFonts() {
+    // Do not show element fonts if the font editor is enabled.
+    // It handles this differently. Rendering twice is not desired.
+    if (Services.prefs.getBoolPref(PREF_FONT_EDITOR)) {
+      return null;
+    }
+
     const {
       fontData,
       fontOptions,
       onPreviewFonts,
       onToggleFontHighlight,
     } = this.props;
     const { fonts } = fontData;