2 files changed, 16 insertions, 15 deletions

diff --git a/web/react/components/user_settings/user_settings_display.jsx b/web/react/components/user_settings/user_settings_display.jsx
index dc3865c68..c464258de 100644
--- a/web/react/components/user_settings/user_settings_display.jsx
+++ b/web/react/components/user_settings/user_settings_display.jsx
@@ -241,7 +241,7 @@ export default class UserSettingsDisplay extends React.Component {
             const inputs = [
                 <div key='userDisplayNameOptions'>
                     <div
-                        className='input-group theme-group dropdown'
+                        className='dropdown'
                     >
                         <select
                             className='form-control'
@@ -251,9 +251,6 @@ export default class UserSettingsDisplay extends React.Component {
                         >
                             {options}
                         </select>
-                        <span className={'input-group-addon ' + Constants.FONTS[this.state.selectedFont]}>
-                            {this.state.selectedFont}
-                        </span>
                     </div>
                     <div><br/>{'Select the font displayed in the Mattermost user interface.'}</div>
                 </div>
@@ -312,12 +309,12 @@ export default class UserSettingsDisplay extends React.Component {
                 <div className='user-settings'>
                     <h3 className='tab-header'>{'Display Settings'}</h3>
                     <div className='divider-dark first'/>
+                    {fontSection}
+                    <div className='divider-dark'/>
                     {clockSection}
                     <div className='divider-dark'/>
                     {nameFormatSection}
                     <div className='divider-dark'/>
-                    {fontSection}
-                    <div className='divider-dark'/>
                 </div>
             </div>
         );
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 788d8a45c..0a52f5b37 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -695,15 +695,19 @@ export function applyTheme(theme) {
 }
 
 export function applyFont(fontName) {
-    const body = document.querySelector('body');
-    const keys = Object.getOwnPropertyNames(body.classList);
-    keys.forEach((k) => {
-        const className = body.classList[k];
-        if (className && className.lastIndexOf('font') === 0) {
-            body.classList.remove(className);
+    const body = $('body');
+
+    for (const key of Reflect.ownKeys(Constants.FONTS)) {
+        const className = Constants.FONTS[key];
+
+        if (fontName === key) {
+            if (!body.hasClass(className)) {
+                body.addClass(className);
+            }
+        } else {
+            body.removeClass(className);
         }
-    });
-    body.classList.add(Constants.FONTS[fontName]);
+    }
 }
 
 export function changeCss(className, classValue, classRepeat) {
@@ -1238,4 +1242,4 @@ export function getPostTerm(post) {
 
 export function isFeatureEnabled(feature) {
     return PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, Constants.FeatureTogglePrefix + feature.label, {value: 'false'}).value === 'true';
-}
\ No newline at end of file
+}