[UI] Make it possible for display fonts to be changed

9 files changed, 31 insertions, 30 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss
index d0be730ac..f80045505 100644
--- a/app/javascript/flavours/glitch/styles/components/modal.scss
+++ b/app/javascript/flavours/glitch/styles/components/modal.scss
@@ -847,7 +847,7 @@
       width: 100%;
       border: none;
       padding: 10px;
-      font-family: 'mastodon-font-monospace', monospace;
+      font-family: 'roboto-mono', monospace;
       background: $ui-base-color;
       color: $primary-text-color;
       font-size: 14px;
diff --git a/app/javascript/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss
index 6e87d7656..c1ed4a6f1 100644
--- a/app/javascript/flavours/glitch/styles/index.scss
+++ b/app/javascript/flavours/glitch/styles/index.scss
@@ -1,6 +1,6 @@
 @import 'mixins';
 @import 'variables';
-//@import 'styles/fonts/roboto';
+@import 'styles/fonts/roboto';
 @import 'styles/fonts/opensans';
 @import 'styles/fonts/roboto-mono';
 @import 'styles/fonts/montserrat';
diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss
index 1ed1a5778..8d1d394f5 100644
--- a/app/javascript/flavours/glitch/styles/variables.scss
+++ b/app/javascript/flavours/glitch/styles/variables.scss
@@ -51,9 +51,9 @@ $media-modal-media-max-height: 80%;
 
 $no-gap-breakpoint: 415px;
 
-$font-sans-serif: 'mastodon-font-sans-serif' !default;
-$font-display: 'mastodon-font-display' !default;
-$font-monospace: 'mastodon-font-monospace' !default;
+$font-sans-serif: 'opensans' !default;
+$font-display: 'montserrat' !default;
+$font-monospace: 'roboto-mono' !default;
 
 // Avatar border size (8% default, 100% for rounded avatars)
 $ui-avatar-border-size: 8%;
diff --git a/app/javascript/styles/fonts/montserrat.scss b/app/javascript/styles/fonts/montserrat.scss
index 80c2329b0..103dee529 100644
--- a/app/javascript/styles/fonts/montserrat.scss
+++ b/app/javascript/styles/fonts/montserrat.scss
@@ -1,5 +1,5 @@
 @font-face {
-  font-family: 'mastodon-font-display';
+  font-family: 'montserrat';
   src: local('Montserrat'),
     url('~fonts/montserrat/Montserrat-Regular.woff2') format('woff2'),
     url('~fonts/montserrat/Montserrat-Regular.woff') format('woff'),
@@ -9,7 +9,7 @@
 }
 
 @font-face {
-  font-family: 'mastodon-font-display';
+  font-family: 'montserrat';
   src: local('Montserrat Medium'),
     url('~fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
   font-weight: 500;
diff --git a/app/javascript/styles/fonts/opensans.scss b/app/javascript/styles/fonts/opensans.scss
index a8d931eb6..6da41e30a 100644
--- a/app/javascript/styles/fonts/opensans.scss
+++ b/app/javascript/styles/fonts/opensans.scss
@@ -1,5 +1,5 @@
 @font-face {
-  font-family: 'mastodon-font-sans-serif';
+  font-family: 'opensans';
   src: local('Open Sans ExtraBold'),
     url('~fonts/opensans/OpenSans-ExtraBold.woff2') format('woff2'),
     url('~fonts/opensans/OpenSans-ExtraBold.ttf') format('truetype');
@@ -8,7 +8,7 @@
 }
 
 @font-face {
-  font-family: 'mastodon-font-sans-serif';
+  font-family: 'opensans';
   src: local('Open Sans Bold'),
     url('~fonts/opensans/OpenSans-Bold.woff2') format('woff2'),
     url('~fonts/opensans/OpenSans-Bold.ttf') format('truetype');
@@ -17,7 +17,7 @@
 }
 
 @font-face {
-  font-family: 'mastodon-font-sans-serif';
+  font-family: 'opensans';
   src: local('Open Sans Bold Italic'),
     url('~fonts/opensans/OpenSans-BoldItalic.woff2') format('woff2'),
     url('~fonts/opensans/OpenSans-BoldItalic.ttf') format('truetype');
@@ -26,7 +26,7 @@
 }
 
 @font-face {
-  font-family: 'mastodon-font-sans-serif';
+  font-family: 'opensans';
   src: local('Open Sans SemiBold'),
     url('~fonts/opensans/OpenSans-SemiBold.woff2') format('woff2'),
     url('~fonts/opensans/OpenSans-SemiBold.ttf') format('truetype');
@@ -35,7 +35,7 @@
 }
 
 @font-face {
-  font-family: 'mastodon-font-sans-serif';
+  font-family: 'opensans';
   src: local('Open Sans SemiBold Italic'),
     url('~fonts/opensans/OpenSans-SemiBoldItalic.woff2') format('woff2'),
     url('~fonts/opensans/OpenSans-SemiBoldItalic.ttf') format('truetype');
@@ -44,7 +44,7 @@
 }
 
 @font-face {
-  font-family: 'mastodon-font-sans-serif';
+  font-family: 'opensans';
   src: local('Open Sans Regular'),
     url('~fonts/opensans/OpenSans-Regular.woff2') format('woff2'),
     url('~fonts/opensans/OpenSans-Regular.ttf') format('truetype');
@@ -53,7 +53,7 @@
 }
 
 @font-face {
-  font-family: 'mastodon-font-sans-serif';
+  font-family: 'opensans';
   src: local('Open Sans Italic'),
     url('~fonts/opensans/OpenSans-Italic.woff2') format('woff2'),
     url('~fonts/opensans/OpenSans-Italic.ttf') format('truetype');
@@ -62,7 +62,7 @@
 }
 
 @font-face {
-  font-family: 'mastodon-font-sans-serif';
+  font-family: 'opensans';
   src: local('Open Sans Regular'),
     url('~fonts/opensans/OpenSans-Regular.woff2') format('woff2'),
     url('~fonts/opensans/OpenSans-Regular.ttf') format('truetype');
@@ -71,7 +71,7 @@
 }
 
 @font-face {
-  font-family: 'mastodon-font-sans-serif';
+  font-family: 'opensans';
   src: local('Open Sans Italic'),
     url('~fonts/opensans/OpenSans-Italic.woff2') format('woff2'),
     url('~fonts/opensans/OpenSans-Italic.ttf') format('truetype');
@@ -80,7 +80,7 @@
 }
 
 @font-face {
-  font-family: 'mastodon-font-sans-serif';
+  font-family: 'opensans';
   src: local('Open Sans Light'),
     url('~fonts/opensans/OpenSans-Light.woff2') format('woff2'),
     url('~fonts/opensans/OpenSans-Light.ttf') format('truetype');
@@ -89,7 +89,7 @@
 }
 
 @font-face {
-  font-family: 'mastodon-font-sans-serif';
+  font-family: 'opensans';
   src: local('Open Sans Light Italic'),
     url('~fonts/opensans/OpenSans-LightItalic.woff2') format('woff2'),
     url('~fonts/opensans/OpenSans-LightItalic.ttf') format('truetype');
@@ -98,7 +98,7 @@
 }
 
 @font-face {
-  font-family: 'mastodon-font-sans-serif';
+  font-family: 'opensans';
   src: local('Open Sans Light'),
     url('~fonts/opensans/OpenSans-Light.woff2') format('woff2'),
     url('~fonts/opensans/OpenSans-Light.ttf') format('truetype');
@@ -107,7 +107,7 @@
 }
 
 @font-face {
-  font-family: 'mastodon-font-sans-serif';
+  font-family: 'opensans';
   src: local('Open Sans Light Italic'),
     url('~fonts/opensans/OpenSans-LightItalic.woff2') format('woff2'),
     url('~fonts/opensans/OpenSans-LightItalic.ttf') format('truetype');
@@ -116,7 +116,7 @@
 }
 
 @font-face {
-  font-family: 'mastodon-font-sans-serif';
+  font-family: 'opensans';
   src: local('Open Sans Light'),
     url('~fonts/opensans/OpenSans-Light.woff2') format('woff2'),
     url('~fonts/opensans/OpenSans-Light.ttf') format('truetype');
@@ -125,7 +125,7 @@
 }
 
 @font-face {
-  font-family: 'mastodon-font-sans-serif';
+  font-family: 'opensans';
   src: local('Open Sans Light Italic'),
     url('~fonts/opensans/OpenSans-LightItalic.woff2') format('woff2'),
     url('~fonts/opensans/OpenSans-LightItalic.ttf') format('truetype');
diff --git a/app/javascript/styles/fonts/roboto-mono.scss b/app/javascript/styles/fonts/roboto-mono.scss
index c793aa6ed..b689c87fe 100644
--- a/app/javascript/styles/fonts/roboto-mono.scss
+++ b/app/javascript/styles/fonts/roboto-mono.scss
@@ -1,5 +1,5 @@
 @font-face {
-  font-family: 'mastodon-font-monospace';
+  font-family: 'roboto-mono';
   src: local('Roboto Mono'),
     url('~fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
     url('~fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'),
diff --git a/app/javascript/styles/fonts/roboto.scss b/app/javascript/styles/fonts/roboto.scss
index b75fdb927..a34cc693c 100644
--- a/app/javascript/styles/fonts/roboto.scss
+++ b/app/javascript/styles/fonts/roboto.scss
@@ -1,5 +1,5 @@
 @font-face {
-  font-family: 'mastodon-font-sans-serif';
+  font-family: 'roboto';
   src: local('Roboto Italic'),
     url('~fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
     url('~fonts/roboto/roboto-italic-webfont.woff') format('woff'),
@@ -10,7 +10,7 @@
 }
 
 @font-face {
-  font-family: 'mastodon-font-sans-serif';
+  font-family: 'roboto';
   src: local('Roboto Bold'),
     url('~fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
     url('~fonts/roboto/roboto-bold-webfont.woff') format('woff'),
@@ -21,7 +21,7 @@
 }
 
 @font-face {
-  font-family: 'mastodon-font-sans-serif';
+  font-family: 'roboto';
   src: local('Roboto Medium'),
     url('~fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
     url('~fonts/roboto/roboto-medium-webfont.woff') format('woff'),
@@ -32,7 +32,7 @@
 }
 
 @font-face {
-  font-family: 'mastodon-font-sans-serif';
+  font-family: 'roboto';
   src: local('Roboto'),
     url('~fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
     url('~fonts/roboto/roboto-regular-webfont.woff') format('woff'),
diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss
index 4d8b0ad03..3b3ca000d 100644
--- a/app/javascript/styles/mailer.scss
+++ b/app/javascript/styles/mailer.scss
@@ -1,5 +1,6 @@
 @import 'mastodon/variables';
 @import 'fonts/opensans';
+@import 'fonts/roboto';
 @import 'fonts/roboto-mono';
 
 table,
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index 8602c3dde..1b2499aa6 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -51,6 +51,6 @@ $media-modal-media-max-height: 80%;
 
 $no-gap-breakpoint: 415px;
 
-$font-sans-serif: 'mastodon-font-sans-serif' !default;
-$font-display: 'mastodon-font-display' !default;
-$font-monospace: 'mastodon-font-monospace' !default;
+$font-sans-serif: 'roboto' !default;
+$font-display: 'montserrat' !default;
+$font-monospace: 'roboto-mono' !default;