PLT-1233: "Display Font" option in Account Settings > Display

2 files changed, 26 insertions, 0 deletions

diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 372e15556..122fad348 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -344,6 +344,21 @@ export default {
         }
     ],
     DEFAULT_CODE_THEME: 'github',
+    FONTS: {
+        'Droid Serif': 'font--droid_serif',
+        'Roboto Slab': 'font--roboto_slab',
+        Lora: 'font--lora',
+        Slabo: 'font--slabo',
+        Arvo: 'font--arvo',
+        'Open Sans': 'font--open_sans',
+        Roboto: 'font--roboto',
+        'PT Sans': 'font--pt_sans',
+        Lato: 'font--lato',
+        'Source Sans Pro': 'font--source_sans_pro',
+        'Exo 2': 'font--exo_2',
+        Ubuntu: 'font--ubuntu'
+    },
+    DEFAULT_FONT: 'Open Sans',
     Preferences: {
         CATEGORY_DIRECT_CHANNEL_SHOW: 'direct_channel_show',
         CATEGORY_DISPLAY_SETTINGS: 'display_settings',
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 9b2f7e057..b3d1350b6 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -694,6 +694,17 @@ export function applyTheme(theme) {
     }
     updateCodeTheme(theme.codeTheme);
 }
+
+export function applyFont(fontName) {
+    const body = document.querySelector('body');
+    body.classList.forEach((className) => {
+        if (className.lastIndexOf('font') === 0) {
+            body.classList.remove(className);
+        }
+    });
+    body.classList.add(Constants.FONTS[fontName]);
+}
+
 export function changeCss(className, classValue, classRepeat) {
     // we need invisible container to store additional css definitions
     var cssMainContainer = $('#css-modifier-container');