--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -165,18 +165,18 @@ class FontInspector {
     this.store = null;
     this.textProperties.clear();
     this.textProperties = null;
     this.writers.clear();
     this.writers = null;
   }
 
   /**
-   * Collect all expected CSS font properties and their values for the selected node
-   * from the node's computed style and from the selected rule.
+   * Collect all the expected CSS font properties and their values for the selected node
+   * from the node's computed style and from all the rules that apply to it.
    *
    * @return {Object}
    */
   getFontProperties() {
     let properties = {};
 
     // First, get all expected font properties from computed styles.
     for (let prop of FONT_PROPERTIES) {
@@ -562,19 +562,18 @@ class FontInspector {
     }
 
     const node = this.inspector.selection.nodeFront;
     const fonts = await this.getFontsForNode(node, options);
     // Get all computed styles for selected node; used for identifying inherited values.
     this.nodeComputedStyle = await this.pageStyle.getComputed(node, {
       filterProperties: FONT_PROPERTIES
     });
-    // Collect any expected font properties and their values from the selected rule.
+    const fontEditor = this.store.getState().fontEditor;
     const properties = this.getFontProperties();
-    const fontEditor = this.store.getState().fontEditor;
 
     // Update the font editor state only if property values in rule differ from store.
     // This can happen when a user makes manual edits to the values in the rule view.
     if (JSON.stringify(properties) !== JSON.stringify(fontEditor.properties)) {
       this.store.dispatch(updateFontEditor(fonts, properties));
     }
   }
 

--- a/devtools/client/inspector/fonts/reducers/font-editor.js
+++ b/devtools/client/inspector/fonts/reducers/font-editor.js
@@ -71,31 +71,48 @@ let reducers = {
       return { axis: [axis], value: state.axes[axis] };
     });
     return newState;
   },
 
   [UPDATE_EDITOR_STATE](state, { fonts, properties }) {
     let axes = {};
 
-    if (properties["font-variation-settings"]) {
+    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;
         }, {});
     }
 
+    // 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;
+    }
+
+    // If not defined in font-variation-settings, setup "wdth" axis with the percentage
+    // number from the value of "font-stretch" if it is not a keyword.
+    let stretch = properties["font-stretch"];
+    // Match the number part from values like: 10%, 10.55%, 0.2%
+    // If there's a match, the number is the second item in the match array.
+    let match = stretch.trim().match(/^(\d+(.\d+)?)%$/);
+    if (axes.wdth === undefined && match && match[1]) {
+      axes.wdth = match[1];
+    }
+
     return { ...state, axes, fonts, properties };
   },
 
   [UPDATE_EDITOR_VISIBILITY](state, { isVisible, selector }) {
     return { ...state, isVisible, selector };
   },
 
 };