diff --git a/web_src/fomantic/_site/globals/site.variables b/web_src/fomantic/_site/globals/site.variables
index 5a8b8033fc..efd2e2a27d 100644
--- a/web_src/fomantic/_site/globals/site.variables
+++ b/web_src/fomantic/_site/globals/site.variables
@@ -1 +1,4 @@
-@fontName : 'Roboto';
+/* https://github.com/fomantic/Fomantic-UI/blob/develop/src/themes/default/globals/site.variables */
+
+@headerFont: var(--fonts-regular);
+@pageFont: var(--fonts-regular);
diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css
index c227185b24..8fe1c7384a 100644
--- a/web_src/fomantic/build/semantic.css
+++ b/web_src/fomantic/build/semantic.css
@@ -43,7 +43,7 @@
 
 .ui.accordion .title:not(.ui) {
   padding: 0.5em 0;
-  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: var(--fonts-regular);
   font-size: 1em;
   color: rgba(0, 0, 0, 0.87);
 }
@@ -423,7 +423,7 @@
   vertical-align: baseline;
   background: #E0E1E2 none;
   color: rgba(0, 0, 0, 0.6);
-  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: var(--fonts-regular);
   margin: 0 0.25em 0 0;
   padding: 0.78571429em 1.5em 0.78571429em;
   text-transform: none;
@@ -5179,7 +5179,7 @@
 .ui.card > .content > .header {
   display: block;
   margin: '';
-  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: var(--fonts-regular);
   color: rgba(0, 0, 0, 0.85);
 }
 
@@ -7619,7 +7619,7 @@ a.inverted.ui.card:hover,
 /* Text Container */
 
 .ui.text.container {
-  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: var(--fonts-regular);
   max-width: 700px;
   line-height: 1.5;
   font-size: 1.14285714rem;
@@ -10723,7 +10723,7 @@ select.ui.dropdown {
 .ui.form input[type="text"],
 .ui.form input[type="file"],
 .ui.form input[type="url"] {
-  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: var(--fonts-regular);
   margin: 0;
   outline: none;
   -webkit-appearance: none;
@@ -10755,7 +10755,7 @@ select.ui.dropdown {
   box-shadow: 0 0 0 0 transparent inset;
   transition: color 0.1s ease, border-color 0.1s ease;
   font-size: 1em;
-  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: var(--fonts-regular);
   line-height: 1.2857;
   resize: vertical;
 }
@@ -14784,7 +14784,7 @@ select.ui.dropdown {
   border: none;
   margin: calc(2rem - 0.1428571428571429em) 0 1rem;
   padding: 0 0;
-  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: var(--fonts-regular);
   font-weight: bold;
   line-height: 1.28571429em;
   text-transform: none;
@@ -24986,7 +24986,7 @@ img.ui.bordered.image {
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   text-align: left;
   line-height: 1.21428571em;
-  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: var(--fonts-regular);
   padding: 0.67857143em 1em;
   background: #FFFFFF;
   border: 1px solid rgba(34, 36, 38, 0.15);
@@ -25868,7 +25868,7 @@ img.ui.bordered.image {
 .ui.items > .item > .content > .header {
   display: inline-block;
   margin: -0.21425em 0 0;
-  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: var(--fonts-regular);
   font-weight: bold;
   color: rgba(0, 0, 0, 0.85);
 }
@@ -28905,7 +28905,7 @@ ol.ui.list ol li,
 .ui.list > .item .header {
   display: block;
   margin: 0;
-  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: var(--fonts-regular);
   font-weight: bold;
   color: rgba(0, 0, 0, 0.87);
 }
@@ -30779,7 +30779,7 @@ ol.ui.suffixed.list li:before,
 .ui.menu {
   display: flex;
   margin: 1rem 0;
-  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: var(--fonts-regular);
   background: #FFFFFF;
   font-weight: normal;
   border: 1px solid rgba(34, 36, 38, 0.15);
@@ -33232,7 +33232,7 @@ Floated Menu / Item
 
 .ui.message .header {
   display: block;
-  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: var(--fonts-regular);
   font-weight: bold;
   margin: -0.14285714em 0 0 0;
 }
@@ -33958,7 +33958,7 @@ Floated Menu / Item
 
 .ui.modal > .header {
   display: block;
-  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: var(--fonts-regular);
   background: #FFFFFF;
   margin: 0;
   padding: 1.25rem 1.5rem;
@@ -34747,7 +34747,7 @@ Floated Menu / Item
 
 .ui.popup > .header {
   padding: 0;
-  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: var(--fonts-regular);
   font-size: 1.14285714em;
   line-height: 1.2;
   font-weight: bold;
@@ -37054,7 +37054,7 @@ template {
 
 .ui.search > .results .result .title {
   margin: -0.14285714em 0 0;
-  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: var(--fonts-regular);
   font-weight: bold;
   font-size: 1em;
   color: rgba(0, 0, 0, 0.85);
@@ -37080,7 +37080,7 @@ template {
 }
 
 .ui.search > .results > .message .header {
-  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: var(--fonts-regular);
   font-size: 1rem;
   font-weight: bold;
   color: rgba(0, 0, 0, 0.87);
@@ -37288,7 +37288,7 @@ template {
   width: 100px;
   white-space: nowrap;
   background: transparent;
-  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: var(--fonts-regular);
   font-size: 1em;
   padding: 0.4em 1em;
   font-weight: bold;
@@ -39034,7 +39034,7 @@ body {
   overflow-x: hidden;
   min-width: 320px;
   background: #FFFFFF;
-  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: var(--fonts-regular);
   font-size: 14px;
   line-height: 1.4285em;
   color: rgba(0, 0, 0, 0.87);
@@ -39049,7 +39049,7 @@ h2,
 h3,
 h4,
 h5 {
-  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: var(--fonts-regular);
   line-height: 1.28571429em;
   margin: calc(2rem - 0.1428571428571429em) 0 1rem;
   font-weight: bold;
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 29eca15d24..3f1d5a5a54 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -104,52 +104,7 @@
     url("../fonts/noto-color-emoji/NotoColorEmoji.ttf") format("truetype");
 }
 
-/* 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.input textarea,
-.ui.form textarea,
-.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 {
+textarea {
   font-family: var(--fonts-regular);
 }