diff --git a/docs/content/doc/advanced/customizing-gitea.en-us.md b/docs/content/doc/advanced/customizing-gitea.en-us.md
index 6bc7be4ad05..474c7274eb5 100644
--- a/docs/content/doc/advanced/customizing-gitea.en-us.md
+++ b/docs/content/doc/advanced/customizing-gitea.en-us.md
@@ -295,3 +295,15 @@ A full list of supported emoji's is at [emoji list](https://gitea.com/gitea/gite
 
 As of version 1.6.0 Gitea has built-in themes. The two built-in themes are, the default theme `gitea`, and a dark theme `arc-green`. To change the look of your Gitea install change the value of `DEFAULT_THEME` in the [ui](https://docs.gitea.io/en-us/config-cheat-sheet/#ui-ui) section of `app.ini` to another one of the available options.  
 As of version 1.8.0 Gitea also has per-user themes. The list of themes a user can choose from can be configured with the `THEMES` value in the [ui](https://docs.gitea.io/en-us/config-cheat-sheet/#ui-ui) section of `app.ini` (defaults to `gitea` and `arc-green`, light and dark respectively)
+
+## Customizing fonts
+
+Fonts can be customized using CSS variables:
+
+```css
+:root {
+  --fonts-proportional: /* custom proportional fonts */ !important;
+  --fonts-monospace: /* custom monospace fonts */ !important;
+  --fonts-emoji: /* custom emoji fonts */ !important;
+}
+```
diff --git a/package-lock.json b/package-lock.json
index 488b01bad21..3475bb8b01e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -955,11 +955,6 @@
       "resolved": "https://registry.npmjs.org/@claviska/jquery-minicolors/-/jquery-minicolors-2.3.5.tgz",
       "integrity": "sha512-LpiN8hyqRPYB2tEzFD4lI54GxKHQXhzrJMnKnsumElYxjkjbdAPmiIm+1k/Mkfn92HepL7t9uaK5iQSFP/19aw=="
     },
-    "@csstools/convert-colors": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
-      "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw=="
-    },
     "@eslint/eslintrc": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.1.3.tgz",
@@ -1275,7 +1270,8 @@
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "dev": true
     },
     "@types/q": {
       "version": "1.5.4",
@@ -3319,14 +3315,6 @@
       "resolved": "https://registry.npmjs.org/css-b64-images/-/css-b64-images-0.2.5.tgz",
       "integrity": "sha1-QgBdgyBLK0pdk7axpWRBM7WSegI="
     },
-    "css-blank-pseudo": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz",
-      "integrity": "sha512-LHz35Hr83dnFeipc7oqFDmsjHdljj3TQtxGGiNWSOsTLIAubSm4TEz8qCaKFpk7idaQ1GfWscF4E6mgpBysA1w==",
-      "requires": {
-        "postcss": "^7.0.5"
-      }
-    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -3341,32 +3329,6 @@
         "timsort": "^0.3.0"
       }
     },
-    "css-has-pseudo": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz",
-      "integrity": "sha512-Z8hnfsZu4o/kt+AuFzeGpLVhFOGO9mluyHBaA2bA8aCGTwah5sT3WV/fTHH8UNZUytOIImuGPrl/prlb4oX4qQ==",
-      "requires": {
-        "postcss": "^7.0.6",
-        "postcss-selector-parser": "^5.0.0-rc.4"
-      },
-      "dependencies": {
-        "cssesc": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
-          "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg=="
-        },
-        "postcss-selector-parser": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
-          "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
-          "requires": {
-            "cssesc": "^2.0.0",
-            "indexes-of": "^1.0.1",
-            "uniq": "^1.0.1"
-          }
-        }
-      }
-    },
     "css-loader": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-4.3.0.tgz",
@@ -3505,14 +3467,6 @@
         }
       }
     },
-    "css-prefers-color-scheme": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz",
-      "integrity": "sha512-MTu6+tMs9S3EUqzmqLXEcgNRbNkkD/TGFvowpeoWJn5Vfq7FMgsmRQs9X5NXAURiOBmOxm/lLjsDNXDE6k9bhg==",
-      "requires": {
-        "postcss": "^7.0.5"
-      }
-    },
     "css-select": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
@@ -3555,11 +3509,6 @@
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
       "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s="
     },
-    "cssdb": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz",
-      "integrity": "sha512-LsTAR1JPEM9TpGhl/0p3nQecC2LJ0kD8X5YARu1hk/9I1gril5vDtMZyNxcEpxxDj34YNck/ucjuoUd66K03oQ=="
-    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5863,11 +5812,6 @@
       "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==",
       "dev": true
     },
-    "flatten": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz",
-      "integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg=="
-    },
     "flush-write-stream": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
@@ -8128,7 +8072,8 @@
     "json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
     },
     "json-schema-traverse": {
       "version": "0.4.1",
@@ -8317,7 +8262,8 @@
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
-      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
+      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
+      "dev": true
     },
     "load-json-file": {
       "version": "1.1.0",
@@ -9936,6 +9882,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
       "requires": {
         "callsites": "^3.0.0"
       },
@@ -9943,7 +9890,8 @@
         "callsites": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-          "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
+          "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+          "dev": true
         }
       }
     },
@@ -10187,15 +10135,6 @@
         }
       }
     },
-    "postcss-attribute-case-insensitive": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.2.tgz",
-      "integrity": "sha512-clkFxk/9pcdb4Vkn0hAHq3YnxBQ2p0CGD1dy24jN+reBck+EWxMbxSUqN4Yj7t0w8csl87K6p0gxBe1utkJsYA==",
-      "requires": {
-        "postcss": "^7.0.2",
-        "postcss-selector-parser": "^6.0.2"
-      }
-    },
     "postcss-calc": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.4.tgz",
@@ -10206,53 +10145,6 @@
         "postcss-value-parser": "^4.0.2"
       }
     },
-    "postcss-color-functional-notation": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz",
-      "integrity": "sha512-ZBARCypjEDofW4P6IdPVTLhDNXPRn8T2s1zHbZidW6rPaaZvcnCS2soYFIQJrMZSxiePJ2XIYTlcb2ztr/eT2g==",
-      "requires": {
-        "postcss": "^7.0.2",
-        "postcss-values-parser": "^2.0.0"
-      }
-    },
-    "postcss-color-gray": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz",
-      "integrity": "sha512-q6BuRnAGKM/ZRpfDascZlIZPjvwsRye7UDNalqVz3s7GDxMtqPY6+Q871liNxsonUw8oC61OG+PSaysYpl1bnw==",
-      "requires": {
-        "@csstools/convert-colors": "^1.4.0",
-        "postcss": "^7.0.5",
-        "postcss-values-parser": "^2.0.0"
-      }
-    },
-    "postcss-color-hex-alpha": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.3.tgz",
-      "integrity": "sha512-PF4GDel8q3kkreVXKLAGNpHKilXsZ6xuu+mOQMHWHLPNyjiUBOr75sp5ZKJfmv1MCus5/DWUGcK9hm6qHEnXYw==",
-      "requires": {
-        "postcss": "^7.0.14",
-        "postcss-values-parser": "^2.0.1"
-      }
-    },
-    "postcss-color-mod-function": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz",
-      "integrity": "sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ==",
-      "requires": {
-        "@csstools/convert-colors": "^1.4.0",
-        "postcss": "^7.0.2",
-        "postcss-values-parser": "^2.0.0"
-      }
-    },
-    "postcss-color-rebeccapurple": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz",
-      "integrity": "sha512-aAe3OhkS6qJXBbqzvZth2Au4V3KieR5sRQ4ptb2b2O8wgvB3SJBsdG+jsn2BZbbwekDG8nTfcCNKcSfe/lEy8g==",
-      "requires": {
-        "postcss": "^7.0.2",
-        "postcss-values-parser": "^2.0.0"
-      }
-    },
     "postcss-colormin": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-4.0.3.tgz",
@@ -10288,75 +10180,6 @@
         }
       }
     },
-    "postcss-custom-media": {
-      "version": "7.0.8",
-      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz",
-      "integrity": "sha512-c9s5iX0Ge15o00HKbuRuTqNndsJUbaXdiNsksnVH8H4gdc+zbLzr/UasOwNG6CTDpLFekVY4672eWdiiWu2GUg==",
-      "requires": {
-        "postcss": "^7.0.14"
-      }
-    },
-    "postcss-custom-properties": {
-      "version": "8.0.11",
-      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz",
-      "integrity": "sha512-nm+o0eLdYqdnJ5abAJeXp4CEU1c1k+eB2yMCvhgzsds/e0umabFrN6HoTy/8Q4K5ilxERdl/JD1LO5ANoYBeMA==",
-      "requires": {
-        "postcss": "^7.0.17",
-        "postcss-values-parser": "^2.0.1"
-      }
-    },
-    "postcss-custom-selectors": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-5.1.2.tgz",
-      "integrity": "sha512-DSGDhqinCqXqlS4R7KGxL1OSycd1lydugJ1ky4iRXPHdBRiozyMHrdu0H3o7qNOCiZwySZTUI5MV0T8QhCLu+w==",
-      "requires": {
-        "postcss": "^7.0.2",
-        "postcss-selector-parser": "^5.0.0-rc.3"
-      },
-      "dependencies": {
-        "cssesc": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
-          "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg=="
-        },
-        "postcss-selector-parser": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
-          "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
-          "requires": {
-            "cssesc": "^2.0.0",
-            "indexes-of": "^1.0.1",
-            "uniq": "^1.0.1"
-          }
-        }
-      }
-    },
-    "postcss-dir-pseudo-class": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-5.0.0.tgz",
-      "integrity": "sha512-3pm4oq8HYWMZePJY+5ANriPs3P07q+LW6FAdTlkFH2XqDdP4HeeJYMOzn0HYLhRSjBO3fhiqSwwU9xEULSrPgw==",
-      "requires": {
-        "postcss": "^7.0.2",
-        "postcss-selector-parser": "^5.0.0-rc.3"
-      },
-      "dependencies": {
-        "cssesc": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
-          "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg=="
-        },
-        "postcss-selector-parser": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
-          "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
-          "requires": {
-            "cssesc": "^2.0.0",
-            "indexes-of": "^1.0.1",
-            "uniq": "^1.0.1"
-          }
-        }
-      }
-    },
     "postcss-discard-comments": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz",
@@ -10389,56 +10212,6 @@
         "postcss": "^7.0.0"
       }
     },
-    "postcss-double-position-gradients": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz",
-      "integrity": "sha512-G+nV8EnQq25fOI8CH/B6krEohGWnF5+3A6H/+JEpOncu5dCnkS1QQ6+ct3Jkaepw1NGVqqOZH6lqrm244mCftA==",
-      "requires": {
-        "postcss": "^7.0.5",
-        "postcss-values-parser": "^2.0.0"
-      }
-    },
-    "postcss-env-function": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-2.0.2.tgz",
-      "integrity": "sha512-rwac4BuZlITeUbiBq60h/xbLzXY43qOsIErngWa4l7Mt+RaSkT7QBjXVGTcBHupykkblHMDrBFh30zchYPaOUw==",
-      "requires": {
-        "postcss": "^7.0.2",
-        "postcss-values-parser": "^2.0.0"
-      }
-    },
-    "postcss-focus-visible": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz",
-      "integrity": "sha512-Z5CkWBw0+idJHSV6+Bgf2peDOFf/x4o+vX/pwcNYrWpXFrSfTkQ3JQ1ojrq9yS+upnAlNRHeg8uEwFTgorjI8g==",
-      "requires": {
-        "postcss": "^7.0.2"
-      }
-    },
-    "postcss-focus-within": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz",
-      "integrity": "sha512-W0APui8jQeBKbCGZudW37EeMCjDeVxKgiYfIIEo8Bdh5SpB9sxds/Iq8SEuzS0Q4YFOlG7EPFulbbxujpkrV2w==",
-      "requires": {
-        "postcss": "^7.0.2"
-      }
-    },
-    "postcss-font-variant": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-4.0.0.tgz",
-      "integrity": "sha512-M8BFYKOvCrI2aITzDad7kWuXXTm0YhGdP9Q8HanmN4EF1Hmcgs1KK5rSHylt/lUJe8yLxiSwWAHdScoEiIxztg==",
-      "requires": {
-        "postcss": "^7.0.2"
-      }
-    },
-    "postcss-gap-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz",
-      "integrity": "sha512-QZSqDaMgXCHuHTEzMsS2KfVDOq7ZFiknSpkrPJY6jmxbugUPTuSzs/vuE5I3zv0WAS+3vhrlqhijiprnuQfzmg==",
-      "requires": {
-        "postcss": "^7.0.2"
-      }
-    },
     "postcss-html": {
       "version": "0.36.0",
       "resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-0.36.0.tgz",
@@ -10448,53 +10221,6 @@
         "htmlparser2": "^3.10.0"
       }
     },
-    "postcss-image-set-function": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz",
-      "integrity": "sha512-oPTcFFip5LZy8Y/whto91L9xdRHCWEMs3e1MdJxhgt4jy2WYXfhkng59fH5qLXSCPN8k4n94p1Czrfe5IOkKUw==",
-      "requires": {
-        "postcss": "^7.0.2",
-        "postcss-values-parser": "^2.0.0"
-      }
-    },
-    "postcss-initial": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-3.0.2.tgz",
-      "integrity": "sha512-ugA2wKonC0xeNHgirR4D3VWHs2JcU08WAi1KFLVcnb7IN89phID6Qtg2RIctWbnvp1TM2BOmDtX8GGLCKdR8YA==",
-      "requires": {
-        "lodash.template": "^4.5.0",
-        "postcss": "^7.0.2"
-      },
-      "dependencies": {
-        "lodash.template": {
-          "version": "4.5.0",
-          "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
-          "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
-          "requires": {
-            "lodash._reinterpolate": "^3.0.0",
-            "lodash.templatesettings": "^4.0.0"
-          }
-        },
-        "lodash.templatesettings": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz",
-          "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==",
-          "requires": {
-            "lodash._reinterpolate": "^3.0.0"
-          }
-        }
-      }
-    },
-    "postcss-lab-function": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz",
-      "integrity": "sha512-whLy1IeZKY+3fYdqQFuDBf8Auw+qFuVnChWjmxm/UhHWqNHZx+B99EwxTvGYmUBqe3Fjxs4L1BoZTJmPu6usVg==",
-      "requires": {
-        "@csstools/convert-colors": "^1.4.0",
-        "postcss": "^7.0.2",
-        "postcss-values-parser": "^2.0.0"
-      }
-    },
     "postcss-less": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-3.1.4.tgz",
@@ -10504,93 +10230,6 @@
         "postcss": "^7.0.14"
       }
     },
-    "postcss-loader": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-4.0.1.tgz",
-      "integrity": "sha512-m+2fe21cs/1Oz4Yds90al5uqVSc0yJRhYSfCRnsnVLt3z0QoNPpqLdgW7CGVWmlUlKEGL9vmq+P4hHS6Orb5DA==",
-      "requires": {
-        "cosmiconfig": "^7.0.0",
-        "klona": "^2.0.3",
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^2.7.1",
-        "semver": "^7.3.2"
-      },
-      "dependencies": {
-        "cosmiconfig": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
-          "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==",
-          "requires": {
-            "@types/parse-json": "^4.0.0",
-            "import-fresh": "^3.2.1",
-            "parse-json": "^5.0.0",
-            "path-type": "^4.0.0",
-            "yaml": "^1.10.0"
-          }
-        },
-        "import-fresh": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
-          "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
-          "requires": {
-            "parent-module": "^1.0.0",
-            "resolve-from": "^4.0.0"
-          }
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "parse-json": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.1.0.tgz",
-          "integrity": "sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==",
-          "requires": {
-            "@babel/code-frame": "^7.0.0",
-            "error-ex": "^1.3.1",
-            "json-parse-even-better-errors": "^2.3.0",
-            "lines-and-columns": "^1.1.6"
-          }
-        },
-        "path-type": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-          "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
-        },
-        "resolve-from": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
-        },
-        "semver": {
-          "version": "7.3.2",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
-          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ=="
-        }
-      }
-    },
-    "postcss-logical": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-3.0.0.tgz",
-      "integrity": "sha512-1SUKdJc2vuMOmeItqGuNaC+N8MzBWFWEkAnRnLpFYj1tGGa7NqyVBujfRtgNa2gXR+6RkGUiB2O5Vmh7E2RmiA==",
-      "requires": {
-        "postcss": "^7.0.2"
-      }
-    },
-    "postcss-media-minmax": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-4.0.0.tgz",
-      "integrity": "sha512-fo9moya6qyxsjbFAYl97qKO9gyre3qvbMnkOZeZwlsW6XYFsvs2DMGDlchVLfAd8LHPZDxivu/+qW2SMQeTHBw==",
-      "requires": {
-        "postcss": "^7.0.2"
-      }
-    },
     "postcss-media-query-parser": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
@@ -10754,14 +10393,6 @@
         "postcss": "^7.0.6"
       }
     },
-    "postcss-nesting": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.1.tgz",
-      "integrity": "sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==",
-      "requires": {
-        "postcss": "^7.0.2"
-      }
-    },
     "postcss-normalize-charset": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
@@ -10925,101 +10556,6 @@
         }
       }
     },
-    "postcss-overflow-shorthand": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz",
-      "integrity": "sha512-aK0fHc9CBNx8jbzMYhshZcEv8LtYnBIRYQD5i7w/K/wS9c2+0NSR6B3OVMu5y0hBHYLcMGjfU+dmWYNKH0I85g==",
-      "requires": {
-        "postcss": "^7.0.2"
-      }
-    },
-    "postcss-page-break": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-2.0.0.tgz",
-      "integrity": "sha512-tkpTSrLpfLfD9HvgOlJuigLuk39wVTbbd8RKcy8/ugV2bNBUW3xU+AIqyxhDrQr1VUj1RmyJrBn1YWrqUm9zAQ==",
-      "requires": {
-        "postcss": "^7.0.2"
-      }
-    },
-    "postcss-place": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-4.0.1.tgz",
-      "integrity": "sha512-Zb6byCSLkgRKLODj/5mQugyuj9bvAAw9LqJJjgwz5cYryGeXfFZfSXoP1UfveccFmeq0b/2xxwcTEVScnqGxBg==",
-      "requires": {
-        "postcss": "^7.0.2",
-        "postcss-values-parser": "^2.0.0"
-      }
-    },
-    "postcss-preset-env": {
-      "version": "6.7.0",
-      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-6.7.0.tgz",
-      "integrity": "sha512-eU4/K5xzSFwUFJ8hTdTQzo2RBLbDVt83QZrAvI07TULOkmyQlnYlpwep+2yIK+K+0KlZO4BvFcleOCCcUtwchg==",
-      "requires": {
-        "autoprefixer": "^9.6.1",
-        "browserslist": "^4.6.4",
-        "caniuse-lite": "^1.0.30000981",
-        "css-blank-pseudo": "^0.1.4",
-        "css-has-pseudo": "^0.10.0",
-        "css-prefers-color-scheme": "^3.1.1",
-        "cssdb": "^4.4.0",
-        "postcss": "^7.0.17",
-        "postcss-attribute-case-insensitive": "^4.0.1",
-        "postcss-color-functional-notation": "^2.0.1",
-        "postcss-color-gray": "^5.0.0",
-        "postcss-color-hex-alpha": "^5.0.3",
-        "postcss-color-mod-function": "^3.0.3",
-        "postcss-color-rebeccapurple": "^4.0.1",
-        "postcss-custom-media": "^7.0.8",
-        "postcss-custom-properties": "^8.0.11",
-        "postcss-custom-selectors": "^5.1.2",
-        "postcss-dir-pseudo-class": "^5.0.0",
-        "postcss-double-position-gradients": "^1.0.0",
-        "postcss-env-function": "^2.0.2",
-        "postcss-focus-visible": "^4.0.0",
-        "postcss-focus-within": "^3.0.0",
-        "postcss-font-variant": "^4.0.0",
-        "postcss-gap-properties": "^2.0.0",
-        "postcss-image-set-function": "^3.0.1",
-        "postcss-initial": "^3.0.0",
-        "postcss-lab-function": "^2.0.1",
-        "postcss-logical": "^3.0.0",
-        "postcss-media-minmax": "^4.0.0",
-        "postcss-nesting": "^7.0.0",
-        "postcss-overflow-shorthand": "^2.0.0",
-        "postcss-page-break": "^2.0.0",
-        "postcss-place": "^4.0.1",
-        "postcss-pseudo-class-any-link": "^6.0.0",
-        "postcss-replace-overflow-wrap": "^3.0.0",
-        "postcss-selector-matches": "^4.0.0",
-        "postcss-selector-not": "^4.0.0"
-      }
-    },
-    "postcss-pseudo-class-any-link": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz",
-      "integrity": "sha512-lgXW9sYJdLqtmw23otOzrtbDXofUdfYzNm4PIpNE322/swES3VU9XlXHeJS46zT2onFO7V1QFdD4Q9LiZj8mew==",
-      "requires": {
-        "postcss": "^7.0.2",
-        "postcss-selector-parser": "^5.0.0-rc.3"
-      },
-      "dependencies": {
-        "cssesc": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
-          "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg=="
-        },
-        "postcss-selector-parser": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
-          "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
-          "requires": {
-            "cssesc": "^2.0.0",
-            "indexes-of": "^1.0.1",
-            "uniq": "^1.0.1"
-          }
-        }
-      }
-    },
     "postcss-reduce-initial": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz",
@@ -11049,14 +10585,6 @@
         }
       }
     },
-    "postcss-replace-overflow-wrap": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz",
-      "integrity": "sha512-2T5hcEHArDT6X9+9dVSPQdo7QHzG4XKclFT8rU5TzJPDN7RIRTbO9c4drUISOVemLj03aezStHCR2AIcr8XLpw==",
-      "requires": {
-        "postcss": "^7.0.2"
-      }
-    },
     "postcss-resolve-nested-selector": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz",
@@ -11091,24 +10619,6 @@
         "postcss": "^7.0.6"
       }
     },
-    "postcss-selector-matches": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz",
-      "integrity": "sha512-LgsHwQR/EsRYSqlwdGzeaPKVT0Ml7LAT6E75T8W8xLJY62CE4S/l03BWIt3jT8Taq22kXP08s2SfTSzaraoPww==",
-      "requires": {
-        "balanced-match": "^1.0.0",
-        "postcss": "^7.0.2"
-      }
-    },
-    "postcss-selector-not": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-4.0.0.tgz",
-      "integrity": "sha512-W+bkBZRhqJaYN8XAnbbZPLWMvZD1wKTu0UxtFKdhtGjWYmxhkUneoeOhRJKdAE5V7ZTlnbHfCR+6bNwK9e1dTQ==",
-      "requires": {
-        "balanced-match": "^1.0.0",
-        "postcss": "^7.0.2"
-      }
-    },
     "postcss-selector-parser": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
@@ -11158,16 +10668,6 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
       "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
     },
-    "postcss-values-parser": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz",
-      "integrity": "sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==",
-      "requires": {
-        "flatten": "^1.0.2",
-        "indexes-of": "^1.0.1",
-        "uniq": "^1.0.1"
-      }
-    },
     "prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -15071,7 +14571,8 @@
     "yaml": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
-      "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg=="
+      "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==",
+      "dev": true
     },
     "yamljs": {
       "version": "0.3.0",
diff --git a/package.json b/package.json
index 7c1f2f56bee..373531abea2 100644
--- a/package.json
+++ b/package.json
@@ -32,9 +32,6 @@
     "mini-css-extract-plugin": "0.11.1",
     "monaco-editor": "0.20.0",
     "monaco-editor-webpack-plugin": "1.9.0",
-    "postcss": "7.0.32",
-    "postcss-loader": "4.0.1",
-    "postcss-preset-env": "6.7.0",
     "raw-loader": "4.0.1",
     "sortablejs": "1.10.2",
     "swagger-ui": "3.32.5",
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index dc4f4c6daa1..c25af2126e2 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -1,86 +1,99 @@
+:root {
+  /* documented customizable variables */
+  --fonts-proportional: -apple-system, "BlinkMacSystemFont", system-ui, "Segoe UI", "Roboto", "Helvetica", "Arial";
+  --fonts-monospace: "SF Mono", "Consolas", "Menlo", "Liberation Mono", "Monaco", "Lucida Console", monospace;
+  --fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
+  /* other variables */
+  --fonts-regular: var(--fonts-proportional), var(--fonts-emoji), sans-serif;
+}
+
+:root:lang(ja) {
+  --fonts-proportional: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Source Han Sans JP", "Noto Sans CJK JP", "Droid Sans Japanese", "Meiryo", "MS PGothic";
+}
+
+:root:lang(zh-CN) {
+  --fonts-proportional: "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "Heiti SC", "SimHei";
+}
+
+:root:lang(zh-TW) {
+  --fonts-proportional: "PingFang TC", "Hiragino Sans TC", "Source Han Sans TW", "Source Han Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", "Heiti TC", "PMingLiU";
+}
+
+:root:lang(zh-HK) {
+  --fonts-proportional: "PingFang HK", "Hiragino Sans TC", "Source Han Sans HK", "Source Han Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", "Heiti TC", "PMingLiU_HKSCS", "PMingLiU";
+}
+
+:root:lang(ko) {
+  --fonts-proportional: "Apple SD Gothic Neo", "NanumBarunGothic", "Malgun Gothic", "Gulim", "Dotum", "Nanum Gothic", "Source Han Sans KR", "Noto Sans CJK KR";
+}
+
 @font-face {
-  font-family: 'Yu Gothic';
-  src: local('Yu Gothic Medium');
+  font-family: "Yu Gothic";
+  src: local("Yu Gothic Medium");
   font-weight: 400;
 }
 
 @font-face {
-  font-family: 'Yu Gothic';
-  src: local('Yu Gothic Bold');
+  font-family: "Yu Gothic";
+  src: local("Yu Gothic Bold");
   font-weight: 700;
 }
 
 @font-face {
-  font-family: 'Noto Color Emoji';
+  font-family: "Noto Color Emoji";
   src:
-    local('Noto Color Emoji'),
-    local('Noto-Color-Emoji'),
-    url('../fonts/noto-color-emoji/NotoColorEmoji.ttf') format('truetype');
+    local("Noto Color Emoji"),
+    local("Noto-Color-Emoji"),
+    url("../fonts/noto-color-emoji/NotoColorEmoji.ttf") format("truetype");
 }
 
-@default-fonts: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
-@monospaced-fonts: 'SF Mono', Consolas, Menlo, 'Liberation Mono', Monaco, 'Lucida Console';
-
-.override-fonts(@fonts) {
-  textarea {
-    font-family: @fonts;
-  }
-
-  .markdown:not(code) {
-    font-family: @fonts;
-  }
-
-  /* We're going to just override the semantic fonts here */
-  h1,
-  h2,
-  h3,
-  h4,
-  h5 {
-    font-family: @fonts;
-  }
-
-  .ui.accordion .title:not(.ui),
-  .ui.button,
-  .ui.card > .content > .header.ui.card > .content > .header,
-  .ui.category.search > .results .category > .name,
-  .ui.form input:not([type]),
-  .ui.form input[type="date"],
-  .ui.form input[type="datetime-local"],
-  .ui.form input[type="email"],
-  .ui.form input[type="file"],
-  .ui.form input[type="number"],
-  .ui.form input[type="password"],
-  .ui.form input[type="search"],
-  .ui.form input[type="tel"],
-  .ui.form input[type="text"],
-  .ui.form input[type="time"],
-  .ui.form input[type="url"],
-  .ui.header,
-  .ui.items > .item > .content > .header,
-  .ui.list .list > .item .header,
-  .ui.list > .item .header,
-  .ui.menu,
-  .ui.message .header,
-  .ui.modal > .header,
-  .ui.popup > .header,
-  .ui.search > .results .result .title,
-  .ui.search > .results > .message .header,
-  body,
-  .ui.input > input,
-  .ui.input input,
-  .ui.statistics .statistic > .value,
-  .ui.statistic > .value,
-  .ui.statistics .statistic > .label,
-  .ui.statistic > .label,
-  .ui.steps .step .title,
-  .ui.text.container,
-  .ui.language > .menu > .item& {
-    font-family: @fonts;
-  }
+/* Most of these selectors override fomantic ui */
+body,
+textarea,
+h1,
+h2,
+h3,
+h4,
+h5,
+.markdown:not(code),
+.ui.accordion .title:not(.ui),
+.ui.button,
+.ui.card > .content > .header.ui.card > .content > .header,
+.ui.category.search > .results .category > .name,
+.ui.form input:not([type]),
+.ui.form input[type="date"],
+.ui.form input[type="datetime-local"],
+.ui.form input[type="email"],
+.ui.form input[type="file"],
+.ui.form input[type="number"],
+.ui.form input[type="password"],
+.ui.form input[type="search"],
+.ui.form input[type="tel"],
+.ui.form input[type="text"],
+.ui.form input[type="time"],
+.ui.form input[type="url"],
+.ui.header,
+.ui.items > .item > .content > .header,
+.ui.list .list > .item .header,
+.ui.list > .item .header,
+.ui.menu,
+.ui.message .header,
+.ui.modal > .header,
+.ui.popup > .header,
+.ui.search > .results .result .title,
+.ui.search > .results > .message .header,
+.ui.input > input,
+.ui.input input,
+.ui.statistics .statistic > .value,
+.ui.statistic > .value,
+.ui.statistics .statistic > .label,
+.ui.statistic > .label,
+.ui.steps .step .title,
+.ui.text.container,
+.ui.language > .menu > .item {
+  font-family: var(--fonts-regular);
 }
 
-.override-fonts(@default-fonts, sans-serif;);
-
 body {
   background-color: #ffffff;
   overflow-y: auto;
@@ -88,31 +101,6 @@ body {
   flex-direction: column;
 }
 
-@ja-fonts: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Source Han Sans JP', 'Noto Sans CJK JP', 'Droid Sans Japanese', 'Meiryo', 'MS PGothic';
-:lang(ja) {
-  .override-fonts(@default-fonts, @ja-fonts, sans-serif;);
-}
-
-@zh-CN-fonts: 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans CN', 'Source Han Sans SC', 'Noto Sans CJK SC', 'Microsoft YaHei', 'Heiti SC', SimHei;
-:lang(zh-CN) {
-  .override-fonts(@default-fonts, @zh-CN-fonts, sans-serif;);
-}
-
-@zh-TW-fonts: 'PingFang TC', 'Hiragino Sans TC', 'Source Han Sans TW', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', 'Heiti TC', PMingLiU;
-:lang(zh-TW) {
-  .override-fonts(@default-fonts, @zh-TW-fonts, sans-serif;);
-}
-
-@zh-HK-fonts: 'PingFang HK', 'Hiragino Sans TC', 'Source Han Sans HK', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', 'Heiti TC', PMingLiU_HKSCS, PMingLiU;
-:lang(zh-HK) {
-  .override-fonts(@default-fonts, @zh-HK-fonts, sans-serif;);
-}
-
-@ko-fonts: 'Apple SD Gothic Neo', 'NanumBarunGothic', 'Malgun Gothic', 'Gulim', 'Dotum', 'Nanum Gothic', 'Source Han Sans KR', 'Noto Sans CJK KR';
-:lang(ko) {
-  .override-fonts(@default-fonts, @ko-fonts, sans-serif;);
-}
-
 img {
   border-radius: 3px;
 }
@@ -137,7 +125,7 @@ a {
 pre,
 code,
 .mono {
-  font: 12px @monospaced-fonts, monospace;
+  font: 12px var(--fonts-monospace);
 
   &.raw {
     padding: 7px 12px;
@@ -545,7 +533,7 @@ code,
   }
 
   .sha.label {
-    font-family: @monospaced-fonts, monospace;
+    font-family: var(--fonts-monospace);
     font-size: 13px;
     padding: 6px 10px 4px;
     font-weight: normal;
@@ -694,7 +682,7 @@ code,
 }
 
 .file-comment {
-  font: 12px @monospaced-fonts, monospace;
+  font: 12px var(--fonts-monospace);
   color: rgba(0, 0, 0, .87);
 }
 
@@ -1008,7 +996,7 @@ i.icon.centerlock {
   color: rgba(27, 31, 35, .3);
   width: 1%;
   user-select: none;
-  font-family: @monospaced-fonts, monospace;
+  font-family: var(--fonts-monospace);
 
   span {
     &.bottom-line {
@@ -1089,7 +1077,7 @@ i.icon.centerlock {
 
     .blame-data {
       display: flex;
-      font-family: @default-fonts, sans-serif;
+      font-family: var(--fonts-regular);
 
       .blame-message {
         flex-grow: 2;
@@ -1131,7 +1119,7 @@ i.icon.centerlock {
 
   *:not(.fa):not(.svg):not(.icon) {
     font-size: 12px;
-    font-family: @monospaced-fonts, monospace;
+    font-family: var(--fonts-monospace);
     line-height: 20px;
   }
 
diff --git a/web_src/less/_dashboard.less b/web_src/less/_dashboard.less
index 3ccbff5c9b6..bbe46f3c302 100644
--- a/web_src/less/_dashboard.less
+++ b/web_src/less/_dashboard.less
@@ -128,7 +128,7 @@
     }
 
     .commit-id {
-      font-family: @monospaced-fonts, monospace;
+      font-family: var(--fonts-monospace);
     }
 
     code {
diff --git a/web_src/less/_editor.less b/web_src/less/_editor.less
index 127416dfc12..86890475e25 100644
--- a/web_src/less/_editor.less
+++ b/web_src/less/_editor.less
@@ -1,5 +1,5 @@
 .CodeMirror {
-  font: 14px @monospaced-fonts, monospace;
+  font: 14px var(--fonts-monospace);
 
   &.cm-s-default {
     border-radius: 3px;
diff --git a/web_src/less/_form.less b/web_src/less/_form.less
index 48a8a79b21b..260910e95cf 100644
--- a/web_src/less/_form.less
+++ b/web_src/less/_form.less
@@ -238,7 +238,7 @@
 
 .githook {
   textarea {
-    font-family: @monospaced-fonts, monospace;
+    font-family: var(--fonts-monospace);
   }
 }
 
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index fee85a700fe..fba83adf7ea 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -545,7 +545,7 @@
           .branch-name {
             display: inline-block;
             padding: 3px 6px;
-            font: 12px @monospaced-fonts, monospace;
+            font: 12px var(--fonts-monospace);
             color: rgba(0, 0, 0, .65);
             background-color: rgba(209, 227, 237, .45);
             border-radius: 3px;
@@ -1162,7 +1162,7 @@
 
           textarea {
             height: 200px;
-            font-family: @monospaced-fonts, monospace;
+            font-family: var(--fonts-monospace);
           }
         }
 
@@ -1277,7 +1277,7 @@
 
       textarea {
         height: 200px;
-        font-family: @monospaced-fonts, monospace;
+        font-family: var(--fonts-monospace);
       }
     }
   }
@@ -2096,7 +2096,7 @@
     &.new {
       .CodeMirror {
         .CodeMirror-code {
-          font-family: @monospaced-fonts, monospace;
+          font-family: var(--fonts-monospace);
 
           .cm-comment {
             background: inherit;
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index 73506f5f0bf..0c54a25fb6b 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -129,7 +129,7 @@
 }
 
 .file-comment {
-  font: 12px @monospaced-fonts, monospace;
+  font: 12px var(--fonts-monospace);
   color: rgba(0, 0, 0, .87);
 }
 
diff --git a/webpack.config.js b/webpack.config.js
index 7c4a6e2651d..1d6f1663331 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -168,29 +168,10 @@ module.exports = {
             loader: 'css-loader',
             options: {
               sourceMap: true,
-              importLoaders: 1,
               url: filterCssImport,
               import: filterCssImport,
             },
           },
-          {
-            loader: 'postcss-loader',
-            options: {
-              sourceMap: true,
-              postcssOptions: {
-                plugins: [
-                  [
-                    'postcss-preset-env',
-                    {
-                      features: {
-                        'system-ui-font-family': false,
-                      },
-                    },
-                  ],
-                ],
-              },
-            },
-          },
         ],
       },
       {
@@ -203,29 +184,11 @@ module.exports = {
             loader: 'css-loader',
             options: {
               sourceMap: true,
-              importLoaders: 2,
+              importLoaders: 1,
               url: filterCssImport,
               import: filterCssImport,
             },
           },
-          {
-            loader: 'postcss-loader',
-            options: {
-              sourceMap: true,
-              postcssOptions: {
-                plugins: [
-                  [
-                    'postcss-preset-env',
-                    {
-                      features: {
-                        'system-ui-font-family': false,
-                      },
-                    },
-                  ],
-                ],
-              },
-            },
-          },
           {
             loader: 'less-loader',
             options: {