--- a/devtools/client/inspector/fonts/actions/font-editor.js
+++ b/devtools/client/inspector/fonts/actions/font-editor.js
@@ -39,22 +39,24 @@ module.exports = {
   updateAxis(axis, value) {
     return {
       type: UPDATE_AXIS_VALUE,
       axis,
       value,
     };
   },
 
-  updateFontEditor(fonts, families = { used: [], notUsed: [] }, properties = {}) {
+  updateFontEditor(fonts, families = { used: [], notUsed: [] }, properties = {},
+                   id = "") {
     return {
       type: UPDATE_EDITOR_STATE,
       fonts,
       families,
       properties,
+      id,
     };
   },
 
   updateFontProperty(property, value) {
     return {
       type: UPDATE_PROPERTY_VALUE,
       property,
       value,

--- a/devtools/client/inspector/fonts/components/FontEditor.js
+++ b/devtools/client/inspector/fonts/components/FontEditor.js
@@ -196,16 +196,17 @@ class FontEditor extends PureComponent {
           })
         );
       })
     );
   }
 
   renderFontSize(value) {
     return value && FontSize({
+      key: this.props.fontEditor.id,
       onChange: this.props.onPropertyChange,
       value,
     });
   }
 
   renderFontStyle(value) {
     return value && FontStyle({
       onChange: this.props.onPropertyChange,

--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -951,17 +951,17 @@ class FontInspector {
         return (font.variationAxes && font.variationAxes.length);
       });
 
       // Prefer picking variable fonts if any were found on descendants of this node.
       // The FontEditor component will render UI for the first font in the list.
       fontsUsed = otherVarFonts.length ? otherVarFonts : fonts;
     }
 
-    this.store.dispatch(updateFontEditor(fontsUsed, families, properties));
+    this.store.dispatch(updateFontEditor(fontsUsed, families, properties, node.actorID));
     this.inspector.emit("fonteditor-updated");
     // Listen to manual changes in the Rule view that could update the Font Editor state
     this.ruleView.on("property-value-updated", this.onRulePropertyUpdated);
   }
 
   /**
    * Capture the state of all variation axes. Allows the user to return to this state with
    * the "Custom" instance after they've selected a font-defined named variation instance.

--- a/devtools/client/inspector/fonts/reducers/font-editor.js
+++ b/devtools/client/inspector/fonts/reducers/font-editor.js
@@ -34,17 +34,18 @@ const INITIAL_STATE = {
   fonts: [],
   // Current selected font variation instance.
   instance: {
     name: getStr("fontinspector.customInstanceName"),
     values: [],
   },
   // CSS font properties defined on the selected rule.
   properties: {},
-
+  // Unique identifier for the selected element.
+  id: "",
   // 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 }) {
@@ -77,17 +78,17 @@ const reducers = {
   [UPDATE_CUSTOM_INSTANCE](state) {
     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, families, properties }) {
+  [UPDATE_EDITOR_STATE](state, { fonts, families, properties, id }) {
     const 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.
     const weight = properties["font-weight"];
     if (axes.wght === undefined && parseFloat(weight).toString() === weight.toString()) {
       axes.wght = weight;
     }
@@ -97,17 +98,17 @@ const reducers = {
     const 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.
     const match = stretch.trim().match(/^(\d+(.\d+)?)%$/);
     if (axes.wdth === undefined && match && match[1]) {
       axes.wdth = match[1];
     }
 
-    return { ...state, axes, fonts, families, properties };
+    return { ...state, axes, fonts, families, properties, id };
   },
 
   [UPDATE_PROPERTY_VALUE](state, { property, value }) {
     const newState = { ...state };
     newState.properties[property] = value;
     return newState;
   },