--- a/devtools/client/inspector/fonts/components/FontPropertyValue.js
+++ b/devtools/client/inspector/fonts/components/FontPropertyValue.js
@@ -92,16 +92,17 @@ class FontPropertyValue extends PureComp
         title: this.props.label,
         type: "range",
       }
     );
 
     const input = dom.input(
       {
         ...defaults,
+        name: this.props.name,
         className: "font-value-input",
         type: "number",
       }
     );
 
     let unitDropdown = null;
     if (this.props.showUnit) {
       // Ensure the dropdown has the current unit type even if we don't recognize it.

--- a/devtools/client/themes/fonts.css
+++ b/devtools/client/themes/fonts.css
@@ -168,59 +168,84 @@
 }
 
 .font-instance-select:active{
   outline: none;
 }
 
 .font-value-input {
   margin-left: 10px;
+  text-align: right;
   width: 60px;
 }
 
+/* Do not use browser "invalid" state */
+.font-value-input:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/* Do not show dotted line focus outline */
+.font-value-input:-moz-focusring {
+  outline: none;
+}
+
+/* Add space between input text from number stepper */
+.font-value-input[type=number]::-moz-number-spin-box{
+  margin-left: 3px;
+}
+
+/* Do not show number stepper for font-size */
+.font-value-input[name=font-size] {
+  -moz-appearance: textfield;
+  margin-right: 5px;
+  padding-right: 5px;
+}
+
+.font-unit-select {
+  padding: 2px;
+}
+
 .font-value-slider {
   flex: 1;
   margin: 0;
   min-width: 50px;
 }
 
 /*
   The value of font-weight goes from 100 to 900 in increments of 100.
   Decorate the slider for font-weight to have 9 vertical notches using a linear gradient.
 */
 .font-value-slider[name=font-weight] {
-  --notch-size: 2px;
+  --notch-size: 3px;
   /* Draw a vertical line to get one notch per background-image instance */
   background-image: linear-gradient(90deg, var(--grey-30) var(--notch-size), transparent 0);
   /* Offset the background so the notch aligns with the center of the slider thumb */
-  background-position: 7px center;
+  background-position: 5px center;
   /* Repeat the background-image horizontally */
   background-repeat: repeat-x;
   /* Size the background to get nine visible notch instances. */
-  background-size: calc(12.5% - var(--notch-size)) 90%;
+  background-size: calc(12.5% - var(--notch-size) / 2) 7px;
 }
 
 .font-value-slider:-moz-focusring {
   outline: none;
 }
 
 .font-value-slider::-moz-focus-outer {
   border: 0;
 }
 
 .font-value-slider::-moz-range-thumb {
   background: var(--grey-50);
-  border-color: rgba(0, 0, 0, 0);
+  border: 0;
 }
+
 .font-value-slider::-moz-range-track {
   background: var(--grey-30);
-}
-
-.font-value-slider:focus::-moz-range-thumb {
-  background: var(--blue-55);
+  height: 3px;
 }
 
 /*
   Restyle a native checkbox input to look like a toggle with a "thumb".
   Build the decoration using solid shapes created with radial- and linear-gradient
   background images. Animate the position of the "thumb" using background-position.
  */
 .font-value-toggle {