--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -17,16 +17,17 @@ const { ELEMENT_STYLE } = require("devto
 
 const FontsApp = createFactory(require("./components/FontsApp"));
 
 const { LocalizationHelper } = require("devtools/shared/l10n");
 const INSPECTOR_L10N =
   new LocalizationHelper("devtools/client/locales/inspector.properties");
 
 const { getStr } = require("./utils/l10n");
+const { parseFontVariationAxes } = require("./utils/font-utils");
 const { updateFonts } = require("./actions/fonts");
 const {
   applyInstance,
   resetFontEditor,
   updateAxis,
   updateCustomInstance,
   updateFontEditor,
   updateFontProperty,
@@ -575,16 +576,22 @@ class FontInspector {
       properties["font-family"].split(",").map(font => font.replace(/\"+/g, "").trim());
 
     // Mark available fonts as used if their names appears in the font-family declaration.
     // TODO: sort used fonts in order of font-family declaration.
     for (let font of fonts) {
       font.used = declaredFontNames.includes(font.CSSFamilyName);
     }
 
+    // Assign writer methods to each axis defined in font-variation-settings.
+    const axes = parseFontVariationAxes(properties["font-variation-settings"]);
+    Object.keys(axes).map(axis => {
+      this.writers.set(axis, this.getWriterForAxis(axis));
+    });
+
     // Update the font editor state only if property values differ from the ones in store.
     // This can happen when a user makes manual changes in the Rule view.
     if (JSON.stringify(properties) !== JSON.stringify(fontEditor.properties)) {
       this.store.dispatch(updateFontEditor(fonts, properties));
     }
   }
 
   /**