--- a/devtools/client/inspector/fonts/components/Font.js
+++ b/devtools/client/inspector/fonts/components/Font.js
@@ -13,17 +13,16 @@ const FontPreview = createFactory(requir
 
 const Types = require("../types");
 
 class Font extends PureComponent {
   static get propTypes() {
     return {
       font: PropTypes.shape(Types.font).isRequired,
       fontOptions: PropTypes.shape(Types.fontOptions).isRequired,
-      isForCurrentElement: PropTypes.bool.isRequired,
       onPreviewFonts: PropTypes.func.isRequired,
       onToggleFontHighlight: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
@@ -96,33 +95,32 @@ class Font extends PureComponent {
 
     return dom.span(attributes);
   }
 
   render() {
     let {
       font,
       fontOptions,
-      isForCurrentElement,
       onPreviewFonts,
       onToggleFontHighlight,
     } = this.props;
 
     let { previewText } = fontOptions;
 
     let {
       previewUrl,
       rule,
       ruleText,
     } = font;
 
     return dom.li(
       {
         className: "font",
       },
-      FontMeta({ font, isForCurrentElement, onToggleFontHighlight }),
+      FontMeta({ font, onToggleFontHighlight }),
       FontPreview({ previewText, previewUrl, onPreviewFonts }),
       this.renderFontCSSCode(rule, ruleText)
     );
   }
 }
 
 module.exports = Font;

--- a/devtools/client/inspector/fonts/components/FontEditor.js
+++ b/devtools/client/inspector/fonts/components/FontEditor.js
@@ -18,16 +18,17 @@ const { getStr } = require("../utils/l10
 const Types = require("../types");
 
 class FontEditor extends PureComponent {
   static get propTypes() {
     return {
       fontEditor: PropTypes.shape(Types.fontEditor).isRequired,
       onInstanceChange: PropTypes.func.isRequired,
       onPropertyChange: PropTypes.func.isRequired,
+      onToggleFontHighlight: PropTypes.func.isRequired,
     };
   }
 
   /**
    * Naive implementation to get increment step for variable font axis that ensures
    * a wide spectrum of precision based on range of values between min and max.
    *
    * @param  {Number|String} min
@@ -74,32 +75,32 @@ class FontEditor extends PureComponent {
         label: axis.name,
         name: axis.tag,
         onChange: this.props.onPropertyChange,
         unit: null
       });
     });
   }
 
-  renderFontFamily(font) {
+  renderFontFamily(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",
         },
-        FontMeta({ font })
+        FontMeta({ font, onToggleFontHighlight })
       )
     );
   }
 
   renderFontSize(value) {
     return FontSize({
       onChange: this.props.onPropertyChange,
       value,
@@ -175,34 +176,35 @@ class FontEditor extends PureComponent {
         },
         getStr("fontinspector.fontInstanceLabel")
       ),
       instanceSelect
     );
   }
 
   render() {
-    const { fonts, axes, instance, properties } = this.props.fontEditor;
+    const { fontEditor, onToggleFontHighlight } = this.props;
+    const { fonts, axes, instance, properties } = fontEditor;
     const usedFonts = fonts.filter(font => font.used);
     // If no used fonts were found, pick the first available font.
     // Else, pick the first used font regardless of how many there are.
     const font = usedFonts.length === 0 ? fonts[0] : usedFonts[0];
     const hasFontAxes = font && font.variationAxes;
     const hasFontInstances = font && font.variationInstances.length > 0;
     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(
       {},
       // Always render UI for font family, format and font file URL.
-      this.renderFontFamily(font),
+      this.renderFontFamily(font, 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"]),
       // Render UI for font style if no "slnt" or "ital" registered axis is defined.
       !hasSlantOrItalicAxis && this.renderFontStyle(properties["font-style"]),

--- a/devtools/client/inspector/fonts/components/FontList.js
+++ b/devtools/client/inspector/fonts/components/FontList.js
@@ -12,40 +12,37 @@ const Font = createFactory(require("./Fo
 
 const Types = require("../types");
 
 class FontList extends PureComponent {
   static get propTypes() {
     return {
       fontOptions: PropTypes.shape(Types.fontOptions).isRequired,
       fonts: PropTypes.arrayOf(PropTypes.shape(Types.font)).isRequired,
-      isCurrentElementFonts: PropTypes.bool.isRequired,
       onPreviewFonts: PropTypes.func.isRequired,
       onToggleFontHighlight: PropTypes.func.isRequired,
     };
   }
 
   render() {
     let {
       fonts,
       fontOptions,
-      isCurrentElementFonts,
       onPreviewFonts,
       onToggleFontHighlight
     } = this.props;
 
     return dom.ul(
       {
         className: "fonts-list"
       },
       fonts.map((font, i) => Font({
         key: i,
         font,
         fontOptions,
-        isForCurrentElement: isCurrentElementFonts,
         onPreviewFonts,
         onToggleFontHighlight,
       }))
     );
   }
 }
 
 module.exports = FontList;

--- a/devtools/client/inspector/fonts/components/FontMeta.js
+++ b/devtools/client/inspector/fonts/components/FontMeta.js
@@ -16,17 +16,16 @@ const Services = require("Services");
 const Types = require("../types");
 
 const FONT_HIGHLIGHTER_PREF = "devtools.inspector.fonthighlighter.enabled";
 
 class FontMeta extends PureComponent {
   static get propTypes() {
     return {
       font: PropTypes.shape(Types.font).isRequired,
-      isForCurrentElement: PropTypes.bool.isRequired,
       onToggleFontHighlight: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
     this.onCopyURL = this.onCopyURL.bind(this);
     this.onNameMouseOver = this.onNameMouseOver.bind(this);
@@ -35,31 +34,29 @@ class FontMeta extends PureComponent {
 
   onCopyURL() {
     clipboardHelper.copyString(this.props.font.URI);
   }
 
   onNameMouseOver() {
     let {
       font,
-      isForCurrentElement,
       onToggleFontHighlight,
     } = this.props;
 
-    onToggleFontHighlight(font, true, isForCurrentElement);
+    onToggleFontHighlight(font, true);
   }
 
   onNameMouseOut() {
     let {
       font,
-      isForCurrentElement,
       onToggleFontHighlight,
     } = this.props;
 
-    onToggleFontHighlight(font, false, isForCurrentElement);
+    onToggleFontHighlight(font, false);
   }
 
   renderFontOrigin(url) {
     if (!url) {
       return dom.p(
         {
           className: "font-origin system"
         },

--- a/devtools/client/inspector/fonts/components/FontOverview.js
+++ b/devtools/client/inspector/fonts/components/FontOverview.js
@@ -19,30 +19,36 @@ class FontOverview extends PureComponent
     return {
       fontData: PropTypes.shape(Types.fontData).isRequired,
       fontOptions: PropTypes.shape(Types.fontOptions).isRequired,
       onPreviewFonts: PropTypes.func.isRequired,
       onToggleFontHighlight: PropTypes.func.isRequired,
     };
   }
 
+  constructor(props) {
+    super(props);
+    this.onToggleFontHighlightGlobal = (font, show) => {
+      this.props.onToggleFontHighlight(font, show, false);
+    };
+  }
+
   renderElementFonts() {
     let {
       fontData,
       fontOptions,
       onPreviewFonts,
       onToggleFontHighlight,
     } = this.props;
     let { fonts } = fontData;
 
     return fonts.length ?
       FontList({
         fonts,
         fontOptions,
-        isCurrentElementFonts: true,
         onPreviewFonts,
         onToggleFontHighlight,
       })
       :
       dom.div(
         {
           className: "devtools-sidepanel-no-result"
         },
@@ -50,35 +56,33 @@ class FontOverview extends PureComponent
       );
   }
 
   renderOtherFonts() {
     let {
       fontData,
       fontOptions,
       onPreviewFonts,
-      onToggleFontHighlight,
     } = this.props;
     let { otherFonts } = fontData;
 
     if (!otherFonts.length) {
       return null;
     }
 
     return Accordion({
       items: [
         {
           header: getStr("fontinspector.otherFontsInPageHeader"),
           component: FontList,
           componentProps: {
             fontOptions,
             fonts: otherFonts,
-            isCurrentElementFonts: false,
             onPreviewFonts,
-            onToggleFontHighlight,
+            onToggleFontHighlight: this.onToggleFontHighlightGlobal
           },
           opened: false
         }
       ]
     });
   }
 
   render() {

--- a/devtools/client/inspector/fonts/components/FontsApp.js
+++ b/devtools/client/inspector/fonts/components/FontsApp.js
@@ -44,16 +44,17 @@ class FontsApp extends PureComponent {
       {
         className: "theme-sidebar inspector-tabpanel",
         id: "sidebar-panel-fontinspector"
       },
       hasFonts && FontEditor({
         fontEditor,
         onInstanceChange,
         onPropertyChange,
+        onToggleFontHighlight,
       }),
       FontOverview({
         fontData,
         fontOptions,
         onPreviewFonts,
         onToggleFontHighlight,
       })
     );

--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -472,19 +472,20 @@ class FontInspector {
   /**
    * 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
    *         Whether or not to reveal the font.
    * @param  {Boolean} isForCurrentElement
-   *         Whether or not to reveal the font for the current element selection.
+   *         Optional. Default `true`. Whether or not to restrict revealing the font
+   *         just to the current element selection.
    */
-  async onToggleFontHighlight(font, show, isForCurrentElement) {
+  async onToggleFontHighlight(font, show, isForCurrentElement = true) {
     if (!this.fontsHighlighter) {
       try {
         this.fontsHighlighter = await this.inspector.toolbox.highlighterUtils
                                           .getHighlighterByType("FontsHighlighter");
       } catch (e) {
         // When connecting to an older server or when debugging a XUL document, the
         // FontsHighlighter won't be available. Silently fail here and prevent any future
         // calls to the function.