Added feature in Preferences to allow user to chose the font of the page

assets/javascripts/app/settings.coffee

@@ -16,6 +16,7 @@ class app.Settings
     'autoInstall'
     'spaceScroll'
     'spaceTimeout'
+    'font'
   ]
 
   INTERNAL_KEYS = [
@@ -65,6 +66,7 @@ class app.Settings
     @store.set(key, value)
     delete @cache[key]
     @setTheme(value) if key == 'theme'
+    @setFont(value) if key == 'font'
     return
 
   del: (key) ->
@@ -152,6 +154,11 @@ class app.Settings
     @updateColorMeta()
     return
 
+  setFont: (font) ->
+    chosenFont = @get('font')
+    document.documentElement.style.setProperty('--selectedFont', chosenFont)
+    return
+
   updateColorMeta: ->
     color = getComputedStyle(document.documentElement).getPropertyValue('--headerBackground').trim()
     $('meta[name=theme-color]').setAttribute('content', color)

assets/javascripts/templates/pages/settings_tmpl.coffee

@@ -7,7 +7,6 @@ themeOption = ({ label, value }, settings) -> """
 
 app.templates.settingsPage = (settings) -> """
   <h1 class="_lined-heading">Preferences</h1>
-
   <div class="_settings-fieldset">
     <h2 class="_settings-legend">Theme:</h2>
     <div class="_settings-inputs">
@@ -20,6 +19,21 @@ app.templates.settingsPage = (settings) -> """
     </div>
   </div>
 
+  <div class="_settings-fieldset">
+    <h2 class="_settings-legend">Font:</h2>
+    <div class="_settings-inputs">
+      <label class="_settings-label _setting-font-family">
+        <select name="font" id="_setting-font-family">
+          <option value="arial" #{if (settings.font == 'Arial' or not settings.font) then ' selected' else ''}>Arial (default)</option>
+          <option value="cascadia" #{if settings.font == 'Cascadia' then ' selected' else ''}>Cascadia</option>
+          <option value="fira-code" #{if settings.font == 'Fira Code' then ' selected' else ''}>Fira Code</option>
+          <option value="proxima-nova" #{if settings.font == 'Proxima Nova' then ' selected' else ''}>Proxima Nova</option>
+          <option value="verdana" #{if settings.font == 'Verdana' then ' selected' else ''}>Verdana</option>
+        </select>
+      </label>
+    </div>
+  </div>
+
   <div class="_settings-fieldset">
     <h2 class="_settings-legend">General:</h2>
 

assets/javascripts/views/content/settings_page.coffee

@@ -19,6 +19,7 @@ class app.views.SettingsPage extends app.View
     settings.analyticsConsent = app.settings.get('analyticsConsent')
     settings.spaceScroll = app.settings.get('spaceScroll')
     settings.spaceTimeout = app.settings.get('spaceTimeout')
+    settings.font = app.settings.get('font')
     settings.autoSupported = app.settings.autoSupported
     settings[layout] = app.settings.hasLayout(layout) for layout in app.settings.LAYOUTS
     settings
@@ -30,6 +31,10 @@ class app.views.SettingsPage extends app.View
     app.settings.set('theme', value)
     return
 
+  setFont: (value) ->
+    app.settings.set('font', value)
+    return
+
   toggleLayout: (layout, enable) ->
     app.settings.setLayout(layout, enable)
     return
@@ -87,6 +92,8 @@ class app.views.SettingsPage extends app.View
     switch input.name
       when 'theme'
         @setTheme input.value
+      when 'font'
+        @setFont input.value
       when 'layout'
         @toggleLayout input.value, input.checked
       when 'smoothScroll'

assets/stylesheets/global/_base.scss

@@ -17,13 +17,17 @@ html._theme-dark {
   color-scheme: dark only;
 }
 
+:root {
+  --selectedFont: Arial;
+}
+
 body {
   height: 100%;
   margin: 0;
   overflow: auto;
   font-size: 1em;
   font-weight: normal;
-  font-family: $baseFont;
+  font-family: var(--selectedFont, $baseFont);
   line-height: 1.7;
   color: $textColor; // fallback to show the error message to browsers that don't support CSS variables.
   color: var(--textColor);