Override fonts using Fomantic config (#13465)

Saves is from doing it manually and saves a few CSS bytes.

Co-authored-by: techknowlogick <techknowlogick@gitea.io>

2 files changed, 23 insertions, 20 deletions

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;