--- a/devtools/client/inspector/fonts/reducers/font-editor.js
+++ b/devtools/client/inspector/fonts/reducers/font-editor.js
@@ -1,15 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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 { getStr } = require("../utils/l10n");
+const { parseFontVariationAxes } = require("../utils/font-utils");
 
 const {
   APPLY_FONT_VARIATION_INSTANCE,
   RESET_EDITOR,
   UPDATE_AXIS_VALUE,
   UPDATE_CUSTOM_INSTANCE,
   UPDATE_EDITOR_STATE,
   UPDATE_PROPERTY_VALUE,
@@ -65,32 +66,17 @@ let reducers = {
     const newState = { ...state };
     newState.customInstanceValues = Object.keys(state.axes).map(axis => {
       return { axis: [axis], value: state.axes[axis] };
     });
     return newState;
   },
 
   [UPDATE_EDITOR_STATE](state, { fonts, properties }) {
-    let axes = {};
-
-    if (properties["font-variation-settings"] !== "normal") {
-      // Parse font-variation-settings CSS declaration into an object
-      // with axis tags as keys and axis values as values.
-      axes = properties["font-variation-settings"]
-        .split(",")
-        .reduce((acc, pair) => {
-          // Tags are always in quotes. Split by quote and filter excessive whitespace.
-          pair = pair.split(/["']/).filter(part => part.trim() !== "");
-          const tag = pair[0].trim();
-          const value = pair[1].trim();
-          acc[tag] = value;
-          return acc;
-        }, {});
-    }
+    let axes = parseFontVariationAxes(properties["font-variation-settings"]);
 
     // If not defined in font-variation-settings, setup "wght" axis with the value of
     // "font-weight" if it is numeric and not a keyword.
     let weight = properties["font-weight"];
     if (axes.wght === undefined && parseFloat(weight).toString() === weight.toString()) {
       axes.wght = weight;
     }
 

--- a/devtools/client/inspector/fonts/utils/font-utils.js
+++ b/devtools/client/inspector/fonts/utils/font-utils.js
@@ -35,9 +35,42 @@ module.exports = {
   getUnitFromValue(value) {
     if (typeof value !== "string") {
       return null;
     }
 
     const match = value.match(/\D+?$/);
     return match && match.length ? match[0] : null;
   },
+
+  /**
+   * Parse the string value of CSS font-variation-settings into an object with
+   * axis tag names and corresponding values. If the string is a keyword or does not
+   * contain axes, return an empty object.
+   *
+   * @param {String} string
+   *        Value of font-variation-settings property,
+   * @return {Object}
+   */
+  parseFontVariationAxes(string) {
+    let axes = {};
+    let keywords = ["initial", "normal", "inherit", "unset"];
+
+    if (keywords.includes(string.trim())) {
+      return axes;
+    }
+
+    // Parse font-variation-settings CSS declaration into an object
+    // with axis tags as keys and axis values as values.
+    axes = string
+      .split(",")
+      .reduce((acc, pair) => {
+        // Tags are always in quotes. Split by quote and filter excessive whitespace.
+        pair = pair.split(/["']/).filter(part => part.trim() !== "");
+        const tag = pair[0].trim();
+        const value = pair[1].trim();
+        acc[tag] = value;
+        return acc;
+      }, {});
+
+    return axes;
+  }
 };