diff --git a/src/routes/api/fonts.ts b/src/routes/api/fonts.ts
index 0f0c85cb2..4205b5dd5 100644
--- a/src/routes/api/fonts.ts
+++ b/src/routes/api/fonts.ts
@@ -1,5 +1,6 @@
 import { Request, Response } from 'express';
 import optionService from "../../services/options.js";
+import { OptionMap } from '../../services/options_interface.js';
 
 function getFontCss(req: Request, res: Response) {
     res.setHeader('Content-Type', 'text/css');
@@ -12,29 +13,47 @@ function getFontCss(req: Request, res: Response) {
 
     const optionsMap = optionService.getOptionMap();
 
-    const mainFontFamilyOverridden = optionsMap.mainFontFamily !== 'theme';
-    const treeFontFamilyOverridden = optionsMap.treeFontFamily !== 'theme';
-    const detailFontFamilyOverridden = optionsMap.detailFontFamily !== 'theme';
-    const monospaceFontFamilyOverridden = optionsMap.monospaceFontFamily !== 'theme';
-
     // using body to be more specific than themes' :root
     let style = 'body {';
-
-    if (mainFontFamilyOverridden) style += `--main-font-family: ${optionsMap.mainFontFamily};`;
-    if (treeFontFamilyOverridden) style += `--tree-font-family: ${optionsMap.treeFontFamily};`;
-    if (detailFontFamilyOverridden) style += `--detail-font-family: ${optionsMap.detailFontFamily};`;
-    if (monospaceFontFamilyOverridden) style += `--monospace-font-family: ${optionsMap.monospaceFontFamily};`;
-
-    style += `--main-font-size: ${optionsMap.mainFontSize}%;`;
-    style += `--tree-font-size: ${optionsMap.treeFontSize}%;`;
-    style += `--detail-font-size: ${optionsMap.detailFontSize}%;`;
-    style += `--monospace-font-size: ${optionsMap.monospaceFontSize}%;`;
-
+    style += getFontFamily(optionsMap);
+    style += getFontSize(optionsMap);
     style += '}';
 
     res.send(style);
 }
 
+function getFontFamily(optionsMap: OptionMap) {
+    let style = "";
+
+    if (optionsMap.mainFontFamily !== 'theme') {
+        style += `--main-font-family: ${optionsMap.mainFontFamily};`;
+    }
+
+    if (optionsMap.treeFontFamily !== 'theme') {
+        style += `--tree-font-family: ${optionsMap.treeFontFamily};`;
+    }
+
+    if (optionsMap.detailFontFamily !== 'theme') {
+        style += `--detail-font-family: ${optionsMap.detailFontFamily};`;
+    }
+
+    if (optionsMap.monospaceFontFamily !== 'theme') {
+        style += `--monospace-font-family: ${optionsMap.monospaceFontFamily};`;
+    }
+
+    return style;
+}
+
+function getFontSize(optionsMap: OptionMap) {
+    let style = "";
+    style += `--main-font-size: ${optionsMap.mainFontSize}%;`;
+    style += `--tree-font-size: ${optionsMap.treeFontSize}%;`;
+    style += `--detail-font-size: ${optionsMap.detailFontSize}%;`;
+    style += `--monospace-font-size: ${optionsMap.monospaceFontSize}%;`;
+
+    return style;
+}
+
 export default {
     getFontCss
 };