diff --git a/src/components/forms/badge-settings-form.js b/src/components/forms/badge-settings-form.js
index a66dfa3cd..b951d3f89 100644
--- a/src/components/forms/badge-settings-form.js
+++ b/src/components/forms/badge-settings-form.js
@@ -264,11 +264,11 @@ class BadgeSettingsForm extends React.Component {
               {T.translate("badge_settings.badge_template_font_family")}
             </label>
             <br />
-            <HexColorInput
-              onChange={this.handleChange}
+            <Input
+              className="form-control"
               id="BADGE_TEMPLATE_FONT_FAMILY"
               value={entity?.BADGE_TEMPLATE_FONT_FAMILY?.value}
-              className="form-control"
+              onChange={this.handleChange}
             />
           </div>
           <div className="col-md-6">