--- a/devtools/client/inspector/fonts/actions/font-editor.js
+++ b/devtools/client/inspector/fonts/actions/font-editor.js
@@ -6,16 +6,17 @@
 
 const {
   APPLY_FONT_VARIATION_INSTANCE,
   RESET_EDITOR,
   UPDATE_AXIS_VALUE,
   UPDATE_CUSTOM_INSTANCE,
   UPDATE_EDITOR_STATE,
   UPDATE_PROPERTY_VALUE,
+  UPDATE_WARNING_MESSAGE,
 } = require("./index");
 
 module.exports = {
 
   resetFontEditor() {
     return {
       type: RESET_EDITOR,
     };
@@ -55,9 +56,16 @@ module.exports = {
   updateFontProperty(property, value) {
     return {
       type: UPDATE_PROPERTY_VALUE,
       property,
       value,
     };
   },
 
+  updateWarningMessage(warning) {
+    return {
+      type: UPDATE_WARNING_MESSAGE,
+      warning,
+    };
+  },
+
 };

--- a/devtools/client/inspector/fonts/actions/index.js
+++ b/devtools/client/inspector/fonts/actions/index.js
@@ -30,9 +30,12 @@ createEnum([
   "UPDATE_FONTS",
 
   // Update the preview text.
   "UPDATE_PREVIEW_TEXT",
 
   // Update the value of a CSS font property
   "UPDATE_PROPERTY_VALUE",
 
+  // Update the warning message with the reason for not showing the font editor
+  "UPDATE_WARNING_MESSAGE",
+
 ], module.exports);

--- a/devtools/client/inspector/fonts/components/FontEditor.js
+++ b/devtools/client/inspector/fonts/components/FontEditor.js
@@ -274,48 +274,48 @@ class FontEditor extends PureComponent {
           className: "font-control-label",
         },
         getStr("fontinspector.fontInstanceLabel")
       ),
       instanceSelect
     );
   }
 
-  renderWarning() {
+  renderWarning(warning) {
     return dom.div(
       {
         id: "font-editor"
       },
       dom.div(
         {
           className: "devtools-sidepanel-no-result"
         },
-        getStr("fontinspector.noFontsOnSelectedElement")
+        warning
       )
     );
   }
 
   render() {
     const { fontEditor } = this.props;
-    const { fonts, families, axes, instance, properties } = fontEditor;
+    const { fonts, families, axes, instance, properties, warning } = fontEditor;
     // Pick the first font to show editor controls regardless of how many fonts are used.
     const font = fonts[0];
     const hasFontAxes = font && font.variationAxes;
     const hasFontInstances = font && font.variationInstances
       && 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";
     });
 
-    // Render empty state message for nodes that don't have a used font.
+    // Show the empty state with a warning message when a used font was not found.
     if (!font) {
-      return this.renderWarning();
+      return this.renderWarning(warning);
     }
 
     return dom.div(
       {
         id: "font-editor"
       },
       // Always render UI for font family, format and font file URL.
       this.renderFontFamily(fonts, families),

--- a/devtools/client/inspector/fonts/reducers/font-editor.js
+++ b/devtools/client/inspector/fonts/reducers/font-editor.js
@@ -9,16 +9,17 @@ const { parseFontVariationAxes } = requi
 
 const {
   APPLY_FONT_VARIATION_INSTANCE,
   RESET_EDITOR,
   UPDATE_AXIS_VALUE,
   UPDATE_CUSTOM_INSTANCE,
   UPDATE_EDITOR_STATE,
   UPDATE_PROPERTY_VALUE,
+  UPDATE_WARNING_MESSAGE,
 } = require("../actions/index");
 
 const INITIAL_STATE = {
   // Variable font axes.
   axes: {},
   // Copy of the most recent axes values. Used to revert from a named instance.
   customInstanceValues: [],
   // Font families declared on the selected element
@@ -33,16 +34,19 @@ const INITIAL_STATE = {
   fonts: [],
   // Current selected font variation instance.
   instance: {
     name: getStr("fontinspector.customInstanceName"),
     values: [],
   },
   // CSS font properties defined on the selected rule.
   properties: {},
+
+  // Warning message with the reason why the font editor cannot be shown.
+  warning: getStr("fontinspector.noFontsOnSelectedElement"),
 };
 
 const reducers = {
 
   // Update font editor with the axes and values defined by a font variation instance.
   [APPLY_FONT_VARIATION_INSTANCE](state, { name, values }) {
     const newState = { ...state };
     newState.instance.name = name;
@@ -100,17 +104,21 @@ const reducers = {
 
     return { ...state, axes, fonts, families, properties };
   },
 
   [UPDATE_PROPERTY_VALUE](state, { property, value }) {
     const newState = { ...state };
     newState.properties[property] = value;
     return newState;
-  }
+  },
+
+  [UPDATE_WARNING_MESSAGE](state, { warning }) {
+    return { ...state, warning };
+  },
 
 };
 
 module.exports = function(state = INITIAL_STATE, action) {
   const reducer = reducers[action.type];
   if (!reducer) {
     return state;
   }