diff --git a/customize.dist/src/less/bar.less b/customize.dist/src/less/bar.less
index b280e53d6..91744728b 100644
--- a/customize.dist/src/less/bar.less
+++ b/customize.dist/src/less/bar.less
@@ -1,4 +1,5 @@
 /* Bottom Bar */
+@import (once) "../less2/include/colortheme.less";
 
 .top-bar, .bottom-bar {
     position:fixed;
@@ -16,7 +17,7 @@
     }
     p {
         margin: -1px;
-        font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
+        font-family: @colortheme_font;
 
         font-size: 20px;
         display:block;
diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less
index bed6c6eea..e607ef7ff 100644
--- a/customize.dist/src/less/cryptpad.less
+++ b/customize.dist/src/less/cryptpad.less
@@ -2,6 +2,7 @@
 @import "./mixins.less";
 
 @import "../less2/include/alertify.less";
+@import "../less2/include/colortheme.less";
 @import "./bar.less";
 @import "./loading.less";
 @import "./dropdown.less";
@@ -27,7 +28,7 @@ html.cp, .cp body {
 
 // add font for tooltips
 .tippy-popper {
-    font: normal normal normal 16px Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
+    font: 16px @colortheme_font;
 }
 
 // override bootstrap colors
@@ -69,7 +70,7 @@ a.github-corner > svg {
 h1,h2,h3,h4,h5,h6 {
     color: @fore;
 
-    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-family: @colortheme_font;
     -webkit-font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
     -moz-font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
     font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
@@ -427,7 +428,7 @@ noscript {
         max-width: 40%;
         padding: 10px;
         box-sizing: border-box;
-        font-family: lato, Helvetica, sans-serif;
+        font-family: @colortheme_font;
         color: @main-color;
 
         label {
@@ -641,7 +642,7 @@ noscript {
     box-sizing: border-box;
     z-index:10000;
     display: none;
-    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+    font-family: @colortheme_font;
     #uploadStatus {
         width: 80vw;
         border: 1px solid black;
diff --git a/customize.dist/src/less/dropdown.less b/customize.dist/src/less/dropdown.less
index 28daed328..7f0b5e7b2 100644
--- a/customize.dist/src/less/dropdown.less
+++ b/customize.dist/src/less/dropdown.less
@@ -1,3 +1,4 @@
+@import (once) "../less2/include/colortheme.less";
 
 /* The container <div> - needed to position the dropdown content */
 .dropdown-bar {
@@ -36,7 +37,7 @@
         z-index: 1000;
         max-height: 300px;
         overflow-y: auto;
-        font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+        font-family: @colortheme_font;
         font-size: 16px;
         line-height: 1em;
 
diff --git a/customize.dist/src/less/footer.less b/customize.dist/src/less/footer.less
index 8862bf951..fdfc69d7a 100644
--- a/customize.dist/src/less/footer.less
+++ b/customize.dist/src/less/footer.less
@@ -1,8 +1,9 @@
 @import "./variables.less";
+@import (once) "../less2/include/colortheme.less";
 
 .cp footer {
     background: @category-bg;
-    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+    font-family: @colortheme_font;
     padding-top: 1em;
     font-size: 1.2em;
     a {
diff --git a/customize.dist/src/less/loading.less b/customize.dist/src/less/loading.less
index cf93330cb..e7cb8060a 100644
--- a/customize.dist/src/less/loading.less
+++ b/customize.dist/src/less/loading.less
@@ -1,4 +1,5 @@
 @import "./variables.less";
+@import (once) "../less2/include/colortheme.less";
 
 .cp #loading {
     position: fixed;
@@ -51,7 +52,7 @@
         text-align: center;
         font-size: 1.5em;
         opacity: 0.7;
-        font-family: lato, Helvetica, sans-serif;
+        font-family: @colortheme_font;
         padding: 15px;
         max-width: 60%;
         display: inline-block;
diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less
index f6ac5b1ac..91afca6ae 100644
--- a/customize.dist/src/less/toolbar.less
+++ b/customize.dist/src/less/toolbar.less
@@ -2,6 +2,7 @@
 @import "./mixins.less";
 
 @import "./dropdown.less";
+@import (once) "../less2/include/colortheme.less";
 
 .unselectable {
     -webkit-touch-callout: none;
@@ -61,7 +62,7 @@
 }
 
 body .userlist-drawer {
-    font: normal normal normal @main-font-size Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
+    font: @main-font-size @colortheme_font;
     min-width: 175px;
     width: 175px;
     display: block;
@@ -100,7 +101,7 @@ body .userlist-drawer {
     }
 
     & > p {
-        font: normal normal normal @main-font-size Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
+        font: @main-font-size @colortheme_font;
         margin: 0;
         padding: 0;
         display: block;
diff --git a/customize.dist/src/less/topbar.less b/customize.dist/src/less/topbar.less
index 3e8812ddd..05472a605 100644
--- a/customize.dist/src/less/topbar.less
+++ b/customize.dist/src/less/topbar.less
@@ -1,4 +1,5 @@
 @import "./variables.less";
+@import (once) "../less2/include/colortheme.less";
 
 #cryptpadTopBar {
     background: @topbar-back;
@@ -8,7 +9,7 @@
     right: 0;
     height: @topbar-height;
     color: @topbar-color;
-    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: @colortheme_font;
     padding: 5px;
     box-sizing: border-box;
     font-size: 30px;
diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less
index 87165c2b8..8469ec518 100644
--- a/customize.dist/src/less/variables.less
+++ b/customize.dist/src/less/variables.less
@@ -49,7 +49,7 @@
 
 // Dropdown
 
-@dropdown-font: @main-font-size -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+@dropdown-font: @main-font-size @colortheme_font;
 @dropdown-bg: #f9f9f9;
 @dropdown-color: black;
 @dropdown-bg-hover: #f1f1f1;
diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index 7f0ede24c..7fbf9b5e5 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -1,3 +1,5 @@
+@colortheme_font: 'Open Sans', 'Helvetica Neue', sans-serif;
+
 @colortheme_link-color: #0275D8;
 @colortheme_link-color-visited: #005999;
 @colortheme_info-background: #fafafa;
diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less
index 35d2e19d4..e2336f2bd 100644
--- a/customize.dist/src/less2/include/infopages.less
+++ b/customize.dist/src/less2/include/infopages.less
@@ -21,8 +21,8 @@
     padding: 0;
     margin: 0;
 
-    font-size: 16pxt:;
-    font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-size: 16px;
+    font-family: @colortheme_font;
 
     .cp-container {
         font-size: 16px;